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就不能选了，完成了一个选项互斥