示例demo:
// 頁面中循環(huán)的列表
form:{
remunerationList:[{
clergyname:'章三'
},
{
clergyname:'李四'
}
... ...
]
}
// el-option 列表
userListOptions:[{
username:'張三'
},
... ...
]
<div v-for="(item,index) in form.remunerationList" :key="index">
<el-select v-model="item.clergyname" filterable placeholder="請選擇" @change="clergynameChange(item)">
<el-option v-for="item in userListOptions" :key="item.id" :label="item.username" :value="item.username" :disabled="item.disabled">
</el-option>
</el-select>
</div>
// el-select 改變事件
clergynameChange(item) {
// 調(diào)用 禁止 再次選擇 方法,如果對話框牽涉到 頁面 dom 列表 回顯 也直接調(diào)用方法
this.disableTeacher()
},
// 再次選擇方法
disableTeacher() {
if (this.form.remunerationList && this.form.remunerationList.length > 0) {
for (let i = 0; i < this.userListOptions.length; i++) {
// 循環(huán)找出相同的屬性 沒找到就 返回 -1 缸兔，這一項 el-option 的 disabled 為 false涂身，反之為 true
const Index = this.form.remunerationList.findIndex((items) => { return items.clergyname === this.userListOptions[i].username })
if (Index != -1) {
this.userListOptions[i].disabled = true
} else {
this.userListOptions[i].disabled = false
}
}
} else {
// 如果 頁面中循環(huán)的列表 為空數(shù)組的 話 el-options 每一項 的 disabled 屬性必然是 false
if(this.userListOptions.length > 0) {
for (let index = 0; index < this.userListOptions.length; index++) {
this.userListOptions[index].disabled = false;
}
}
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
