DevSelectMutex 互斥选择器
主要功能
当页面上存在多个下拉选择框时,DevSelectMutex 组件可确保不同下拉框中的选项内容相互互斥。用户在一个下拉框中选择某个选项后, 该选项会在其他下拉框中自动禁用,DevSelectMutex 组件可以提供便捷的互斥选择功能,提高开发效率。
基本使用
将下拉框选择数据通过options
传入到 DevSelectMutex 组件中,然后引用 devUseExtractSelected 方法,推算出当前所有已选择数据,再通过all-select-value属性传入。 v-model
属性即可获取选择的结果,并实现选择内容互斥,示例如下:
注意
devUseExtractSelected 方法原理,是使用了vue的计算属性,当你需要通过接口获取所绑定的数据时,不可以直接覆盖原数据,因为这样数据地址会发生改变,从而引起计算属性失效,解决方案看下方示例 replaceArrayData 方法。
多选互斥
在某些场景下,需要用户可以选择多个选项,但是这些选项之间又是互斥的,即选择了一个选项后,其他选项会被禁用。此时可以使用 multiple
属性,示例如下:
动态添加
API
属性
DevSelectMutex Props
—
事件
DevSelectMutex Events
Function