【vue2】element两个select用同一个options。下拉框内容是互斥状态。一个多选一个单选。多选实现（全选，反选，清空）功能

前景提要：两个下拉框。第一个是多选。第二个是单选。如果选到了的value那另一个下拉框则不显示。
并且多选要实现（全选/反选/清空）功能

直接上代码

template

<div>
            Feature Select:
            <el-select
              v-model="featureSelectValue"
              multiple
              placeholder="请选择"
              @change="featureSelect"
              @remove-tag="featureRemoveTag"
              style="width: 400px"
              :popper-append-to-body="false"
            >
              <div class="select_up" style="margin-left: 20px">
                <el-button type="text" v-on:click="selectDevAll">
                  <i class="el-icon-circle-check" />
                  全选</el-button
                >
                <el-button type="text" v-on:click="removeDevTag">
                  <i class="el-icon-close" />
                  清空</el-button
                >
                <el-button type="text" v-on:click="selectDevReverse">
                  <i class="el-icon-copy-document" />
                  反选</el-button
                >
              </div>
              <el-option
                v-for="(item, index) in featureColumns"
                :key="index"
                :label="item.label"
                :value="item.prop"
              >
              </el-option>
            </el-select>
          </div>
          <div style="margin-top: 20px; margin-left: 16px">
            Taret Select:
            <el-select
              v-model="targetSelectValue"
              placeholder="请选择"
              @change="targetSelect"
              clearable
              :popper-append-to-body="false"
            >
              <el-option
                v-for="(item, index) in targetColumns"
                :key="index"
                :label="item.label"
                :value="item.prop"
              >
              </el-option>
            </el-select>
          </div>

script

data(){
	previewColumnData: [],//两个共用的所有options
   featureColumns: [],//多选框的下拉框options
   featureSelectValue: [],//多选框选中的值
   targetColumns: [],//单选框下拉框options
   targetSelectValue: [],//单选框选中的值
},
methods:{
	//互斥的方法
 	commonFun() {
      const allOption = this.previewColumnData;
      this.targetColumns = allOption.filter(
        (item) => !this.featureSelectValue.includes(item.label)
      );
    },
    //多选框选中的fun
    featureSelect(value) {
      this.commonFun();
    },
    //多选框单个移除的fun
    featureRemoveTag(value) {
      this.commonFun();
    },
    //单选框选择的fun
    targetSelect(value) {
      this.commonFun();
    },
  //清空操作
    removeDevTag() {
      this.featureSelectValue = [];
      this.commonFun();
    },
    //全选
    selectDevAll() {
      this.featureSelectValue = this.featureColumns.map((item) => item.label);
      this.commonFun();
    },
    //反选
    selectDevReverse() {
      this.featureSelectValue = this.featureColumns
        .filter((item) => !this.featureSelectValue.includes(item.label))
        .map((item) => item.label);
      this.commonFun();
    },
}