Skip to content

DevSelectMutex 互斥选择器 ​

主要功能 ​

当页面上存在多个下拉选择框时,DevSelectMutex 组件可确保不同下拉框中的选项内容相互互斥。用户在一个下拉框中选择某个选项后, 该选项会在其他下拉框中自动禁用,DevSelectMutex 组件可以提供便捷的互斥选择功能,提高开发效率。

基本使用 ​

将下拉框选择数据通过options 传入到 DevSelectMutex 组件中,然后引用 devUseExtractSelected 方法,推算出当前所有已选择数据,再通过all-select-value属性传入。 v-model 属性即可获取选择的结果,并实现选择内容互斥,示例如下:

注意

devUseExtractSelected 方法原理,是使用了vue的计算属性,当你需要通过接口获取所绑定的数据时,不可以直接覆盖原数据,因为这样数据地址会发生改变,从而引起计算属性失效,解决方案看下方示例 replaceArrayData 方法。

多选互斥 ​

在某些场景下,需要用户可以选择多个选项,但是这些选项之间又是互斥的,即选择了一个选项后,其他选项会被禁用。此时可以使用 multiple 属性,示例如下:

动态添加 ​

API ​

属性 ​

DevSelectMutex Props

—
暂无数据

事件 ​

DevSelectMutex Events

Function
暂无数据

插槽 ​

DevSelectMutex Slots

暂无数据