【vue3+elementuiplus】el-select下拉框会自动触发校验规则

在Vue 3和Element Plus中，如果你想要让el-select下拉框不自动触发验证规则，你可以通过设置el-form-item的prop属性来指定需要验证的字段，并通过设置el-form的auto-validate属性为false来禁止自动验证。

下面是一个简单的例子：

<template>
  <el-form :model="formData" :rules="rules" ref="formRef" @submit.prevent>
    <el-form-item label="选择项" prop="selectedOption">
      <el-select v-model="formData.selectedOption" placeholder="请选择">
        <el-option label="选项A" value="A"></el-option>
        <el-option label="选项B" value="B"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const formData = reactive({
  selectedOption: '',
});
 
const rules = {
  selectedOption: [
    { required: true, message: '请选择一个选项', trigger: 'change' },
  ],
};
 
const formRef = ref(null);
 
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功');
    } else {
      ElMessage.error('表单验证失败');
      return false;
    }
  });
};
</script>

在这个例子中，el-select下拉框绑定了formData.selectedOption，并且在el-form-item中设置了prop属性为selectedOption。el-form组件的rules属性定义了selectedOption字段的验证规则。

当你尝试提交表单时，submitForm函数会触发表单的验证。如果你不希望在选择下拉框值时自动触发验证，这个设置将确保验证只会在用户尝试提交表单时发生。