vue动态列表上，多个el-select共用同一个筛选列表，控制一个el-select选择某项后，其它el-select就不能再选择该项了

需求：动态列表上，多个el-select共用同一个筛选列表，控制一个el-select选择某项后，其它el-select就不能再选择该项了

代码：

1）动态列表中给el-select一个change事件，并在el-option上设置disabled：

​
<el-dialog v-dialogDrag :visible.sync="dialogFlag" :title="title" width="30%" class="editInfo">
      <el-form id="ruleForm" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="170px" class="demo-ruleForm">
        <el-form-item label="顺序别称：" prop="orderName">
          <el-input v-model="ruleForm.orderName"  placeholder="请输入该条顺序的别称" clearable />
        </el-form-item>
        <el-form-item :prop="item.keyName" :label="`顺序${index+1}`" v-for="(item,index) in orderList" :index="index" >
          <el-select v-model="ruleForm[item.keyName]" clearable placeholder="请选择顺序" @change="handleSelect()">
            <el-option v-for="items in orderList" :key="items.code" :label="items.name" :value="items.code" :disabled="setDisable(items.code)"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFlag=false">取 消</el-button>
          <el-button type="primary" @click="commonUtil.formValidate($refs['ruleForm'])&&addOrUpdateSure()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

​

2）接下来在methods中如下逻辑，即可实现需求：

​
 methods: 
    handleSelect(){
      this.selectedOptions = Object.values(this.ruleForm);
    },
    setDisable(value){
      if(this.selectedOptions.indexOf(value) >= 0){
        return true;
      } else {
        return false;
      }
    }
 }

​