前端 vue 自定义下拉选项禁用

<div style="display: flex;flex-direction: column;">
   <div>
     <el-select v-model="form.kefu" class="list_search_small" clearable filterable placeholder="请选择" >
       <el-option  v-for="item in list" :key="item.user_id" :label="item.user_name" :value="item.user_id" :disabled="disabledKefuOption.includes(item.user_id)"/>
     </el-select>
     <el-button type="primary" @click='addKefu'  style="margin-left: -24px;height: 40px;" :disabled='addKefuDis'>添加</el-button>
    </div>
    
    <div v-if='kefuList.length!=0' :style="kefuList.length>5?'height: 100px;overflow-y: auto;margin: 19px 0px;':''"> 
    	// 渲染出来的
         <div v-for='(item,index) in kefuList' :key='index' style="padding-left: 15px;">
            <div>
              <span> {{item.user_name}}</span>
              <i class="el-icon-close" style="color: red;cursor: pointer;" @click.prevent="removeKefu(item)"></i>
             </div>
          </div>
      </div>
 </div>

 data() {
    return {
      form:{
      	kefu:''
      },
      addKefuDis:false,
      disabledKefuOption:[],
      kefuList:[],
      list:[{user_id:1,user_name:'111111'},{user_id:2,user_name:'222'}],
      }
    }

          addKefu(){ //添加按钮
                if(!this.form.kefu){
                    this.$message.error('请选择专属客服!')
                    return false
                }else{
                    this.addKefuDis=true
                    // 调接口
                    ajax_update_zskf({id:this.url_id,kefu_id:this.form.kefu}).then((res)=>{
                            if(res.code==200){
                                let arr ={}
                                let name=this.kefu_list_data[this.form.kefu] // 变成user_name
                                arr={'user_name':name,'user_id':this.form.kefu}
                                this.kefuList.push(arr)
                                this.disabledKefuOption.push(this.form.kefu) // 禁用
                                this.form.kefu=''
                            }
                        }).finally(()=>{this.addKefuDis=false})
                }
            },
            removeKefu(item){ // 删除客服
                ajax_del_zskf({id:this.url_id,kefu_id:item.user_id}).then((res)=>{
                    if(res.code==200){
                        var index = this.kefuList.indexOf(item)
                        if (index !== -1) {
                            this.kefuList.splice(index, 1)
                            this.disabledKefuOption.splice(index,1) // 删除禁用选项
                        }
                    }
                })
            },

喜欢拿走，留个小心心哦~(✪ω✪)