DevCascaderMutex 级联互斥选择器
主要功能
当页面上存在多个级联选择框时,DevCascaderMutex 组件可确保不同级联框中的选项内容相互互斥。用户在一个级联框中选择某个选项后,该选项会在其他级联框中自动禁用,DevCascaderMutex 组件可以提供便捷的互斥选择功能,提高开发效率。
基本使用
将级联框选择数据通过options
传入到 DevCascaderMutex
组件中,然后使用组件库封装好的devObjEstimation
方法处理选项信息,并将结果通过options-path
属性传入组件内容部, 使用 devUseExtractSelected
方法计算出所有选项信息,并通过all-select-value
属性传入组件内容部。v-model
属性即可获取选择的结果,并实现选择内容互斥,示例如下:
注意
devUseExtractSelected
方法原理,是使用了vue的计算属性,当你需要通过接口获取所绑定的数据时,不可以直接覆盖原数据,因为这样数据地址会发生改变,从而引起计算属性失效,解决方案看下方示例 replaceArrayData
方法,或者使用全局 devReplaceArrayData
方法替换数组内容。
单选互斥
组件默认即为单选互斥,如果只需要绑定最后一级的数据,请查看下面示例:
多选互斥
在某些场景下,需要用户可以选择多个选项,但是这些选项之间又是互斥的,即选择了一个选项后,其他选项会被禁用。此时可以使用multiple
属性,示例如下:
组件还提供了 disable-parent-on-child
属性,当子节点全被选中后,同时禁用父节点,但需要注意,开启此功能后无法展开禁用的父节点,来查看子节点内容。示例如下:
动态添加
API
属性
DevCascaderMutex Props
—
事件
DevCascaderMutex Events
Function