el-select多个多选的情况下已经选中的不允许再选择

最新推荐文章于 2025-07-02 18:07:49 发布

原创最新推荐文章于 2025-07-02 18:07:49 发布 · 963 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

1.重点：给:disabled使用一个函数（checkDisabled）

<el-form-item :prop="'tableData.' + scope.$index + '.returnWarehouseIds'" :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]">
   <el-select
     style="width: 100%"
     v-model="scope.row.returnWarehouseIds"
     placeholder="请选择"
     multiple
     collapse-tags
     clearable
   >
     <el-option v-for="innerItem in returnWarehouseIdsList" :key="innerItem.id" :label="innerItem.returnWarehouseName" :value="innerItem.id" :disabled="checkDisabled(scope.row.returnWarehouseIds,innerItem)"> </el-option>
   </el-select>
 </el-form-item>

2.checkDisabled函数体

   // 动态disabled
    checkDisabled(val, item) { 
      // 定义变量
      let flag = false;
      let allSelected = []
      // 存储所有选中的值
      this.formData.tableData.map((item) => {
        allSelected = allSelected.concat(item.returnWarehouseIds)
      })
      // 不在当前选中项 并且在所有选中项里面
      if (!val.includes(item.id) && allSelected.includes(item.id)) {
        flag = true;
      }
      return flag;
    },