下拉框不能重复选择

用element组件写下拉框的时候，遇到一个需求：一个下拉框选择了，另一个就不能重复选择

实现思路：对下拉框数组的每一项设置disabled属性，如果选择过的就设置为true，因为内容变化有时会影响到对disabled判断，需要使用watch深度监听数组内容的变化。

效果如下图：

代码如下：

          <el-select
            v-model="domain.value"
            clearable
            placeholder="请选择表单问题"
            style="width: 200px;"
            class="filter-item"
            @change="changeOptions"
          >
            <el-option
              v-for="(item, index) in h5Arr"
              :key="index"
              :value="item.value"
              :label="item.label"
              
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-option>
          </el-select>

这里下拉框的数据每一项都要设置disabled属性

//dynamicValidateForm.domains为最后保存选择选项的数组
"dynamicValidateForm.domains": {
      handler(newArr) {
        // 一开始都设置为允许使用
        this.h5Arr = this.h5Arr.map((item) => {
          item.disabled = false;
          return item;
        });
        // 将选过的设置为禁用
        newArr.forEach((x) => {
          this.h5Arr.forEach((y) => {
            if (x.value === y.value) {
              y.disabled = true;
            }
          });
        });
      },
      deep: true,
    },