下拉框互斥付燥，即：同時有多個下拉框敷钾，可選內(nèi)容option是相同的枝哄，有一個下拉框選了某項，其他下拉框?qū)⒉荒茉龠M行選擇阻荒。
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.給下拉框綁定數(shù)據(jù)羊壹，有4個下拉框蓖宦，所以要綁定4個值，放到一個hobby對象中油猫，可以看的更加清楚明了稠茂。
changeArr: [],//存放選中選項的數(shù)組
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方法睬关，選中某個選項時觸發(fā)，remove-tag方法毡证，移除某個選項時觸發(fā)电爹。
//change方法
changeSelect () {
//對hobby對象進行遍歷，把選中的值放到changeArr數(shù)組中
for (var key in this.hobby) {
this.hobby[key].forEach(item => {
this.changeArr.push(item)
})
}
//有可能會出現(xiàn)重復的元素料睛，所以對changeArr數(shù)組進行去重操作
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方法，移除某一項時觸發(fā)該方法
removeSelect (val) {
//將移除的那一項阱州，從changeArr數(shù)組中找到下標挑秉，并移除
var str = this.changeArr.findIndex(item => item === val)
this.changeArr.splice(str, 1)
//對hobbyList數(shù)組遍歷，將移除的那項disabled屬性置為false苔货，啟用
this.hobbyList.forEach((item) => {
if (val === item.value) {
item.disabled = false
}
})
},
//數(shù)組去重的方法犀概，避免changeArr出現(xiàn)重復的元素
quchong (arr) {
return arr.filter(function (item, index, arr) {
return arr.indexOf(item, 0) === index
})
}
到此為止，如圖所示夜惭，可多選的el-selsct下拉框的互斥問題就已經(jīng)解決姻灶。
image.png
