示例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="請(qǐng)選擇" @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)用 禁止 再次選擇 方法,如果對(duì)話框牽涉到 頁面 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 ,這一項(xiàng) 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 每一項(xiàng) 的 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)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。