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

在Element UI中，要实现el-select不能选择重复的选项，可以通过自定义验证规则来实现。以下是一个简单的例子，展示了如何使用Element UI的表单验证功能来实现这一点。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="选项" prop="options">
      <el-select
        v-model="form.options"
        multiple
        placeholder="请选择"
        @change="handleSelectChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        options: []
      },
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        // ...更多选项
      ],
      rules: {
        options: [
          {
            validator: (rule, value, callback) => {
              const uniqueValues = [...new Set(value)];
              if (uniqueValues.length < value.length) {
                callback(new Error('不能选择重复的选项'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    handleSelectChange(value) {
      this.$refs.form.validateField('options');
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，el-select 绑定了多个选项，并且定义了一个自定义验证规则，该规则在options字段的验证函数中检查选中的值是否有重复。如果有重复，则触发错误并显示给用户。这个例子还展示了如何使用el-form的ref属性来调用表单的验证方法，以及如何在用户尝试提交表单时处理验证结果。