elementUI form表单 el-select多个下拉选不可重复选择

vue3+vite写法(下面有vue2的)

<template>
  <div>
    <el-form ref="form" :rules="rules" :model="formData">
      <div
        class="setPrize"
        v-for="(item, index) in formData.checkList"
        :key="index"
      >
        <el-form-item
          label=""
          :rules="rules.checkId"
          :prop="'checkList.' + index + '.checkId'"
        >
          <el-select
            v-model="item.checkId"
            @change="changeSelect(item)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionList"
              :disabled="item.disabled"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const optionList = ref([
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' },
      { id: 4, name: '444' },
    ]);

    const formData = ref({
      checkList: [
        { checkId: '' },
        { checkId: '' },
        { checkId: '' },
        { checkId: '' },
      ],
    });

    const rules = ref({
      checkId: [{ required: true, message: '请选择选项', trigger: 'change' }],
    });

    const changeSelect = (item) => {
      setDisable();
    };

    const setDisable = () => {
      optionList.value.forEach((item) => {
        const isdisable = formData.value.checkList.findIndex(
          (val) => val.checkId == item.id
        );

        if (isdisable !== -1) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });
    };

    onMounted(() => {
      // 初始化时设置一次
      setDisable();
    });

    return {
      optionList,
      formData,
      rules,
      changeSelect,
    };
  },
};
</script>

vue2写法

<template>
  <div>
    <el-form ref="form" :rules="rules" :model="FormData">
      <div
        class="setPrize"
        v-for="(item, index) in FormData.checkList"
        :key="index"
      >
        <el-form-item
          label=""
          :rules="rules.checkId"
          :prop="'checkList.' + index + '.checkId'"
        >
          <el-select
            v-model="item.checkId"
            @change="changeSelect(item)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionList"
              :disabled="item.disabled"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      optionList: [
        { id: 1, name: '111' },
        { id: 2, name: '222' },
        { id: 3, name: '333' },
        { id: 4, name: '444' },
      ],
      FormData: {
        checkList: [
          { checkId: '' },
          { checkId: '' },
          { checkId: '' },
          { checkId: '' },
        ],
      },
      rules: {
        checkId: [{ required: true, message: '请选择选项', trigger: 'change' }],
      },
    }
  },

  methods: {
    changeSelect() {
      this.setDisable()
    },

    //   //1、 循环 下拉选择框里的每一项， 和FormData.checkList得每一项做对比。如果对比成功就结束FormData.checkList得循环把下拉框对应得item.disable设置为true， 否则设置为false。

    // setDisable(){

    //   this.optionList.forEach(item=> {

    //     for( let i = 0; i < this.FormData.checkList.length; i++){

    //       if(item.id==this.FormData.checkList[i].checkId) {

    //         item.disabled = true

    //         break ;

    //       }else{

    //         item.disabled = false

    //       }

    //     }

    //   })

    // },

    //2、循环 下拉选择框里的每一项，通过findIndex()函数查找FormData.checkList里是否有相同时有则把下拉框对应得item.disable设置为true， 否则设置为false

    setDisable() {
      this.optionList.forEach((item) => {
        let isdisable = this.FormData.checkList.findIndex(
          (val) => val.checkId == item.id
        )

        if (isdisable != -1) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      })
    },
  },
}
</script>