<div>两个相同选项的值互斥</div>
<el-select
v-model="valueA"
multiple
placeholder="选项1"
>
<el-option
v-for="item of selectData"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="hasInclude(valueB, item.value)"
/>
</el-select>
<el-select
v-model="valueB"
multiple
placeholder="选项2"
>
<el-option
v-for="item of selectData"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="hasInclude(valueA, item.value)"
/>
</el-select>
data() {
return {
valueA: '',
valueB: '',
selectData: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
}
},
methods: {
// 判断数组中是否有这个元素
hasInclude(arr = [], item) {
return arr.includes(item)
},
},
如下图所示:选项1选了1、3项,选项2就不能选了,完成了一个选项互斥