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

暂无数据