el-select 已选中值点击提交仍触发校验

在Vue.js的el-select组件中，当用户选择了一个选项并点击提交按钮时，有时需要在表单验证中忽略已选择的选项（即已选中值），因为这些通常被视为有效数据，不应该作为输入错误的原因。要实现这个功能，你可以采取以下步骤：

1. **阻止默认事件**：在用户点击提交按钮时，检查当前选中的option是否已被选中，如果是，则可以阻止其触发内置的`change`事件或表单的验证。

<template>
  <el-form @submit.prevent="handleSubmit">
    <el-select v-model="selectedValue" placeholder="请选择">
      <!-- ... -->
    </el-select>
    <el-button type="primary" @click.stop="handleSubmit">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
    };
  },
  methods: {
    handleSubmit(e) {
      if (!e.target.value || this.selectedValue === e.target.value) { // 检查是否有变化且非空
        // 验证其他字段...
        this.$refs.yourForm.validate((valid) => {
          if (valid) {
            // 提交表单
          } else {
            console.log('表单验证失败');
          }
        });
      } else {
        this.$refs.yourForm.validateField('yourField', { validateFunc: () => true }); // 忽略已选值的验证
        this.$refs.yourForm.validate();
      }
    },
  },
};
</script>

在这个例子中，我们通过`@click.stop`阻止了表单的默认提交行为，并在`handleSubmit`方法中进行了判断。如果选中的值没有改变，就直接进行整体验证；如果有变化，先对其他字段验证，然后仅针对未选中的字段进行验证。