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

m0_53682699

已于 2023-10-16 09:16:28 修改

阅读量755

点赞数 3

文章标签： vue.js elementui javascript

于 2023-09-11 17:08:40 首次发布

本文链接：https://blog.youkuaiyun.com/m0_53682699/article/details/132812608

版权

文章描述了如何在Vue.js中实现动态列表中的el-select组件，当其中一个el-select选择某项时，其他el-select禁止选择该选项。通过change事件和disabled属性以及方法setDisable来控制这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：动态列表上，多个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;
      }
    }
 }