el-select 禁用已选择的下拉选项

示例demo:

// 页面中循环的列表
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) {
      // 调用 禁止 再次选择 方法,如果对话框牵涉到 页面 dom 列表 回显 也直接调用方法 
       this.disableTeacher()
    },

   // 再次选择方法
    disableTeacher() {
      if (this.form.remunerationList && this.form.remunerationList.length > 0) {
        for (let i = 0; i < this.userListOptions.length; i++) {
       // 循环找出相同的属性 没找到就 返回 -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 {
      // 如果 页面中循环的列表 为空数组的 话 el-options 每一项 的 disabled 属性必然是 false
        if(this.userListOptions.length > 0) {
          for (let index = 0; index < this.userListOptions.length; index++) {
            this.userListOptions[index].disabled = false;
          }
        }
      }
    }