Skip to content

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
暂无数据

插槽

DevCascaderMutex Slots

暂无数据