el-select下拉框重复选择

el-select下拉框重复选择的使用场景：

场景：在用element做下拉框的时候，有时候要对多个下拉框的选择做出限制，例如一个下拉选了，另一个就不能重复选定。这里提供两种方法如下：

---

第一种方法（设置disabled禁用）

`效果图如下

`

思路：对下拉框的数组每一项设置disabled禁用属性，如果有选过的设置为true。
这里还有一个问题，从未选状态到选择内容a和选择内容a到内容b两者是会影响到对disabled的判断的，所以要使用watch来深度监听数组对应内容的变化

代码如下

<template>
  <div>
    <el-button type = "primary" size = "small" @click = "add">新增</el-button>

    <el-table :data="tableData">
      <el-table-column label="选择水果不重复" prop="value">
        <template v-slot="scope">
          <el-select v-model="scope.row.value">
            <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"
                       :disabled="item.disabled"/>
          </el-select>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "options",
  data() {
    return {
      tableData: [
        {value:'1'},
        {value:'2'},
      ],
      options: [
        {label: '西瓜', value: '1', disabled: true},
        {label: '柠檬', value: '2', disabled: true},
        {label: '葡萄', value: '3', disabled: false},
        {label: '苹果', value: '4', disabled: false},
        {label: '香蕉', value: '5', disabled: false},
        {label: '火龙果', value: '6', disabled: false},
        {label: '凤梨', value: '7', disabled: false},
      ],
    }
  },
  watch: {
    "tableData": {
      handler(newArr) {
        // 一开始都设置为允许使用
        this.options = this.options.map(item=>{
          item.disabled = false
          return item
        })
        // 将选过的设置为禁用
        newArr.forEach(x=>{
          this.options.forEach(y=>{
            if(x.value === y.value){
              y.disabled = true
            }
          })
        })
      },
      deep:true
    }
  },
  methods:{
    add(){
      this.tableData.push({value:''})
    }
  }
}
</script>
<style scoped>

.el-button{
  float:left;
}

.el-select {
  width:150px;
  margin: 10px;
}

</style>

---

第二种方法（使用副本数组）：

效果图如下

思路：先创建一个下拉框列表数据的副本数组，每次当有下拉框改变时，修改副本里的数据，采用change事件来修改副本

代码如下

<template>
  <div>
    <el-button type="primary" size="small" @click="add">新增</el-button>

    <el-table :data="tableData">
      <el-table-column label="选择水果不重复" prop="value">
        <template v-slot="scope">
          <el-select v-model="scope.row.value" @change="changeOptions">
            <el-option v-for="item in myOptions" :key="item.value" :value="item.value" :label="item.label"/>
          </el-select>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "options2",
  data() {
    return {
      tableData: [
        {value: ''},
      ],
      options: [
        {label: '西瓜', value: '1'},
        {label: '柠檬', value: '2'},
        {label: '葡萄', value: '3'},
        {label: '苹果', value: '4'},
        {label: '香蕉', value: '5'},
        {label: '火龙果', value: '6'},
        {label: '凤梨', value: '7'},
      ],
      myOptions: [
        {label: '西瓜', value: '1'},
        {label: '柠檬', value: '2'},
        {label: '葡萄', value: '3'},
        {label: '苹果', value: '4'},
        {label: '香蕉', value: '5'},
        {label: '火龙果', value: '6'},
        {label: '凤梨', value: '7'},
      ],
    }
  },
  methods: {
    add() {
      this.tableData.push({value: ''})
    },
    changeOptions() {
      // 需要移除的下标
      let pos = []
      this.tableData.forEach(item => {
        if (item.value) {
          pos.push(item.value)
        }
      })
      pos = Array.from(new Set(pos)).sort()
      let myOptions = this.options.concat()

	  // 设置副本数组的数据
      for(let i = myOptions.length - 1;i >=0; i--){
        for(let j = 0 ;j < pos.length;j++){
           if(myOptions[i].value === pos[j]){
             myOptions.splice(i,1)
           }
        }
      }
      this.myOptions = JSON.parse(JSON.stringify(myOptions))
    }
  }
}
</script>

<style scoped>

.el-button {
  float: left;
}

.el-select {
  width: 150px;
  margin: 10px;
}

</style>

---

总结：

如果下拉框的数据较少，建议使用disabled的方式；如果数据量较大，建议用创建副本的方式，再使用远程搜索和分页来解决。