共用同一数组的el-select不可重复选择同一项

最新推荐文章于 2024-02-29 19:48:17 发布

Aquarius09

最新推荐文章于 2024-02-29 19:48:17 发布

阅读量174

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Aquarius09/article/details/133138215

版权

   <el-col :span="8">
            <el-form-item label="组织人" prop="wPerson1" required>
              <el-select
                v-model="formInline.wPerson1"
                style="width: 12vw"
                clearable
                @change="changePerson1"
              >
                <el-option
                  v-for="item in wPerson1List"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="候选人" prop="wPerson2" required>
              <el-select
                v-model="formInline.wPerson2"
                style="width: 12vw"
                clearable
                @change="changewPerson2"
              >
                <el-option
                  v-for="item in wPerson2List"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

data(){
  return {
   wPerson1List: [
        {
          value: "1",
          label: "组织人1",
          disabled: false,
        },
        {
          value: "2",
          label: "组织人2",
          disabled: false,
        },
      ],
      wPerson2List: [
        {
          value: "1",
          label: "候选人1",
          disabled: false,
        },
        {
          value: "2",
          label: "候选人2",
          disabled: false,
        },
      ],}
}

methods:{
 // 不可重复选择
    changePerson1() {
      this.wPerson2ByList.forEach((element) => {
        if (element.value === this.formInline.wPerson2) {
          element.disabled = true;
        } else {
          element.disabled = false;
        }
      });
    },
    changePerson2() {
      this.wPerson1List.forEach((element) => {
        if (element.value === this.formInline.wPerson1) {
          element.disabled = true;
        } else {
          element.disabled = false;
        }
      });
    },
}