el-select 两个下拉框选项互斥

<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就不能选了,完成了一个选项互斥
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值