下拉框互斥，即：同时有多个下拉框，可选内容option是相同的，有一个下拉框选了某项，其他下拉框将不能再进行选择。
1.首先需要4个el-select下拉框，注意有multiple属性，该文章只适用于带有multiple属性的下拉框，如果需要单选下拉框互斥，请移步我的主页看（vue+elementui单选el-select下拉框的互斥问题）。
<el-form label-width="80px">
<el-form-item label="爱好1">
<el-select v-model="hobby.hobby1" @remove-tag="removeSelect" @change="changeSelect" multiple>
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="爱好2">
<el-select v-model="hobby.hobby2" @remove-tag="removeSelect" @change="changeSelect" multiple>
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="爱好3">
<el-select v-model="hobby.hobby3" @remove-tag="removeSelect" @change="changeSelect" multiple>
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="爱好4">
<el-select v-model="hobby.hobby4" @remove-tag="removeSelect" @change="changeSelect" multiple>
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-form>
2.给下拉框绑定数据，有4个下拉框，所以要绑定4个值，放到一个hobby对象中，可以看的更加清楚明了。
changeArr: [],//存放选中选项的数组
hobby: {//el-select绑定的值
hobby1: '',
hobby2: '',
hobby3: '',
hobby4: ''
},
hobbyList: [//下拉框遍历option
{value: '001', disabled: false},
{value: '002', disabled: false},
{value: '003', disabled: false},
{value: '004', disabled: false},
{value: '005', disabled: false},
{value: '006', disabled: false}
]
3.编写方法，一共需要两个方法，change方法，选中某个选项时触发，remove-tag方法，移除某个选项时触发。
//change方法
changeSelect () {
//对hobby对象进行遍历，把选中的值放到changeArr数组中
for (var key in this.hobby) {
this.hobby[key].forEach(item => {
this.changeArr.push(item)
})
}
//有可能会出现重复的元素，所以对changeArr数组进行去重操作
this.changeArr = this.quchong(this.changeArr)
//对changeArr进行遍历，对hobbyList进行遍历，
//changeArr有哪一项，就把hobbyList中该项的disabled属性置为true，禁用
this.changeArr.forEach(item => {
this.hobbyList.forEach(yitem => {
if (item === yitem.value) {
yitem.disabled = true
}
})
})
},
//remove-tag方法，移除某一项时触发该方法
removeSelect (val) {
//将移除的那一项，从changeArr数组中找到下标，并移除
var str = this.changeArr.findIndex(item => item === val)
this.changeArr.splice(str, 1)
//对hobbyList数组遍历，将移除的那项disabled属性置为false，启用
this.hobbyList.forEach((item) => {
if (val === item.value) {
item.disabled = false
}
})
},
//数组去重的方法，避免changeArr出现重复的元素
quchong (arr) {
return arr.filter(function (item, index, arr) {
return arr.indexOf(item, 0) === index
})
}
到此为止，如图所示，可多选的el-selsct下拉框的互斥问题就已经解决。
image.png
