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

转自执着慕晚的流年

<template>
  <div>
    <div class="program" v-for="(parItem,index) in parArr" :key="index">
      <el-select v-model="parItem.id"  @change="onChangeProgram">
        <el-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" :label="subItem.name">
          {{subItem.name}}
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  name:'home',
  data() {
    return {
      parArr:[{},{}],
      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>