vue 动态循环出的多个select 不能重复选择相同的数据（转）

转自https://blog.csdn.net/qq_43526066/article/details/92810962

先看效果图：

代码如下：

<template>
  <div class="program" v-for="(parItem,index) in parArr" :key="parItem.guid">
    <Select v-model="parItem.id"  @on-change="onChangeProgram">
      <Option v-for="(subItem,idx) in programList" :key="subItem.id" :data-index='idx'
        v-show="parItem.id == subItem.id || !selectIdsArr.includes(subItem.id)"
        :value="subItem.id> {{subItem.name}}</Option>
    </Select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parArr:[{guid:'ddddd',id:null,},{guid:'eeeee',id:null,},{guid:'ffff',id:null,}],
      selectIdsArr:[],
      programList:[{
        "id":1,
        "name":"选项1"
      },{
        "id":2,
        "name":"选项2"
      },{
        "id":3,
        "name":"选项3"
      }],
    }
  },
  methods: {
    onChangeProgram() {
      this.selectIdsArr = [];
      for (const item of this.parArr) {
        if (item.id) {
          this.selectIdsArr.push(item.id);
        }
      }
    },
  },
}
</script>