多个Select框间公用一个数据源，且不能重复选择

标题很抽象，我们直接详述应用场景。

应用场景

如下图：可以新增(增加)或者删除(减少)的功能，在我们选择如图 “选择对应关系” 时，若第一项选中的值，在其他项中则不让其展示选择。

例如： 选择对应关系 总共有 5个值。

若第一项中选择了，店铺1 和 店铺2。

到第二项中选择时，只展示 店铺3 和 店铺4 和 店铺5。

当第二项选中， 店铺3。

到第三项中只选择时，只展示 店铺4 和 店铺5。

Pick

若此时，第一项删掉 店铺1。

则此时第一项、第二项、第三项都会展示 店铺1 和 店铺4 和 店铺5。

小编最开始实现类似的场景校验，简单粗暴。直接在最后保存提交在判断是否有重复值

还是要学会成长 👇 附源码

      <div v-for="(item, index) in map_list" :key="index" :rules="mapList">
        <div>
          <el-form-item label="名称" :rules="rules.point_dept_name" :prop="'map_list.' + index + '.point_dept_name'">
            <el-input v-model="item.point_dept_name" :disabled="isShow"></el-input>
          </el-form-item>

          <el-form-item label="ID" :rules="rules.point_dept_code" :prop="'map_list.' + index + '.point_dept_name'">
            <el-input v-model="item.point_dept_code" :disabled="isShow"></el-input>
          </el-form-item>

          <el-button type="text" @click="deleteCityModel(index)" v-if="!isShow"> - 删除</el-button>
        </div>

        <el-form-item label="选择对应关系" :rules="rules.dept_code_list" :prop="'map_list.' + index + '.dept_code_list'">   
          <el-select v-model="item.dept_code_list" multiple placeholder="请选择" :disabled="isShow">
            <template v-for="itemCode in deptCodeList">
              <el-option
                :key="itemCode.dept_code"
                :label="itemCode.dept_name"
                :value="itemCode.dept_code"
                v-if="isShowList(itemCode.dept_code, item.dept_code_list)"
              >
              </el-option>
            </template>
          </el-select>
        </el-form-item>
      </div>

map_list: [Array] 是循环对应关系的外层大数组。

map_list: [
    {
        point_dept_name: '第一个店铺',
        point_dept_code: 'shop0001',
        dept_code_list: '0001， 0002',
    },
    {
        point_dept_name: '第二个店铺',
        point_dept_code: 'shop0002',
        dept_code_list: '0003',
    }
]

deptCodeList： [Array] 是循环 ‘选择对应关系’的数组

      deptCodeList: [
          {
            dept_code: "0001",
            dept_name: "店铺1",
          },
          {
            dept_code: "0002",
            dept_name: "店铺2",
          },
          {
            dept_code: "0003",
            dept_name: "店铺3",
          },
          {
            dept_code: "0004",
            dept_name: "店铺4",
          },
          {
            dept_code: "0005",
            dept_name: "店铺5",
          }
      ],

重要的解题思路在于, 获取当前可展示且操作数据的options：

isShowList(dept_code, dept_code_list) {
  return !map_list.some(item => item.dept_code_list.includes(dept_code)) || dept_code_list.includes(dept_code);
},