多个el-select下拉框互斥选择

HTML：

        
      

      
        
      
      
        
      

data() {
    return {
      valueA: '',
      valueB: '',
      valueC: '',
      form:{
        valueA: '',
        valueB: '',
        valueC: '',
      },
      selectData: [{
        value: '选项1',
        label: '黄金糕',
        disabled:false
      }, {
        value: '选项2',
        label: '双皮奶',
        disabled:false
      }, {
        value: '选项3',
        label: '蚵仔煎',
        disabled:false
      }, {
        value: '选项4',
        label: '龙须面',
        disabled:false
      }, {
        value: '选项5',
        label: '北京烤鸭',
        disabled:false
      }],
    }
  },
methods:{
    changeSelect (val) {
      // 先把selectData恢复默认值，即所有的选项都是可选
      this.selectData.forEach(item => {
        item.disabled = false
      })
      // 判断form对象中，哪个属性发⽣了变化
      // 将选中值val直接赋值给发⽣变化的值，更新form对象
      if (this.form.valueA !== this.valueA) {
        this.form.valueA = val
      } else if (this.form.valueB !== this.valueB) {
        this.form.valueB = val
      } else if (this.form.valueC !== this.valueC) {
        this.form.valueC = val
      }
      // 对form对象遍历，form中有哪⼀项，就把selectData中该项的disabled属性变为true，禁⽤
      for (var key in this.form) {
        this.selectData.forEach(item => {
          if (this.form[key] === item.value) {
            item.disabled = true
          }
        })
      }
      this.valueA = this.form.valueA
      this.valueB = this.form.valueB
      this.valueC = this.form.valueC
    },
},