vue+ElementUI ：多个选择器（el-select），公用一套选项，且每个选项只能被选中一次

问题描述：在数据查询时，有时可以动态添加查询条件，且每个查询条件只能出现一次。例如：查询一个商品，可以动态添加颜色条件、价格条件、品牌条件等。这种场景下可以通过选择器选择查询条件，然后在输入框中输入该条件对应的值。此文章解决的就是：有多个选择器，这些选择器公用一套选项，当一个选择器选择了一个选项后，其他选择器就不能选择该选项。

效果录屏：

下拉菜单:选中的项不可再选中的实现效果，实现方式见博文

问题分析：要想实现其他选择器选中的选项，不出现的下拉面板中，就需要对选择器的可选选项（option）进行处理，处理的逻辑是，每个选择器的可选选项（option）为所有的选项内容剔除已经选过的选项，最后为了回显选中项，每个选择器的可选还要加上自身选中的选项。即allOption-selectedOption+selfValue

处理选择器选项的核心函数如下：

computeDifferenceSet(currentSelectValue){
        let remainingOption = this.options.filter((item)=>{
            return this.selectOption.indexOf(item.value)==-1||currentSelectValue===item.value
        })
        return remainingOption
    }

全部代码如下：

<template>
  <div>
    <el-select v-model="value1" placeholder="请选择" @change="handleChange" clearable>
      <el-option
        v-for="item in computeDifferenceSet(value1)"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="value2" placeholder="请选择"  @change="handleChange" clearable>
      <el-option
        v-for="item in computeDifferenceSet(value2)"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="value3" placeholder="请选择"  @change="handleChange" clearable>
      <el-option
        v-for="item in computeDifferenceSet(value3)"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="value4" placeholder="请选择"  @change="handleChange" clearable>
      <el-option
        v-for="item in computeDifferenceSet(value4)"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="value5" placeholder="请选择"  @change="handleChange" clearable>
      <el-option
        v-for="item in computeDifferenceSet(value5)"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [//全部选项
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      selectOption:["","","","",""],//每个选择器的选中项
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleChange(){//选择器选项改变时
      this.selectOption=[this.value1,this.value2,this.value3,this.value4,this.value5]
    },
    computeDifferenceSet(currentSelectValue){//计算每个下拉菜单的可以选中的选项
        let remainingOption = this.options.filter((item)=>{
            return this.selectOption.indexOf(item.value)==-1||currentSelectValue===item.value
        })
        return remainingOption
    }
  },
};
</script>

注意：selectOption中元素的个数等于选择器的个数，selectOption中每个元素的值为对应选择器选中的选项。