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

一枚前端小卡拉米

于 2024-07-23 09:56:06 发布

阅读量121

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/WebZichen/article/details/140627320

版权

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;
    },