Vue 多个select 不能重复选择相同属性的数据

第二种 , 根据当前选择的属性 , 去禁用相同属性的选项 ,意思就是相同属性的选项不可重复选择

效果演示

去除或者禁用 都是一样的道理 改一行代码就行, 这里不细说 ,直接贴代码吧

<template>
  <div id="app">
    <div v-for="(item, index) in selectList" :key="index">
      <el-select
        v-model="item.value"
        style="width: 200px"
        placeholder="请选择"
        @change="changSelect(item.value)"
      >
        <el-option
          v-for="it in options"
          :value="it.value"
          :key="it.value"
          :label="it.label"
          :disabled="it.disabled"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      selectList: [
        { value: "", type: "" },
        { value: "", type: "" },
        { value: "", type: "" },
        { value: "", type: "" },
      ],
      options: [
        {
          value: "1",
          label: "香蕉",
          type: 1,
          disabled: false,
        },
        {
          value: "2",
          label: "西瓜",
          type: 1,
          disabled: false,
        },
        {
          value: "4",
          label: "麻辣鸡丝",
          type: 2,
          disabled: false,
        },
        {
          value: "5",
          label: "酱排骨",
          type: 2,
          disabled: false,
        },
        {
          value: "6",
          label: "红烧肉",
          type: 2,
          disabled: false,
        },
        {
          value: "7",
          label: "劳斯莱斯",
          type: 3,
          disabled: false,
        },
        {
          value: "8",
          label: "奥迪A6L",
          type: 3,
          disabled: false,
        },
        {
          value: "9",
          label: "口红",
          type: 4,
          disabled: false,
        },
        {
          value: "10",
          label: "面膜",
          type: 4,
          disabled: false,
        },
      ],
    };
  },
  created() {},
  methods: {
    changSelect(value) {
      this.options.forEach((ele) => {
      	ele.disabled = false;
        this.selectList.forEach((element) => {
          if (element.value == ele.value) {
            ele.disabled = true;
            this.options.forEach((it)=>{
                if (ele.disabled == true) {
                    if (ele.type==it.type) {
                        it.disabled=true
                    }
                }
            })
          }
        });
      });
    },
  },
};
</script>

才疏学浅 , 下面这段JS写的有点low ,但终归可以实现 , 应该还有更好的实现方式