el-select 禁用已選擇的下拉選項(xiàng)

示例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ù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容