Element Plus 问题：选择框表单校验没有触发

我命由我123452026-03-21 8:32

html 复制代码

<el-form ref="myForm" :model="myFormParams" :rules="myFormRules">
  <el-form-item label="课程" prop="course">
    <el-select v-model.trim="myFormParams.course" filterable clearable placeholder="请选择课程">
      <el-option v-for="item in courseList" :key="item" :label="item" :value="item" />
    </el-select>
  </el-form-item>
</el-form>

js 复制代码

const courseList = ["Vue", "React", "JavaScript", "HTML", "CSS"];

const myForm = ref(null);
const myFormParams = reactive({
  course: "",
});
const myFormRules = reactive({
  course: [{ required: true, message: "请选择课程", trigger: "blur" }],
});

在前端 Vue3 开发中，使用 Element Plus 组件库时，上述代码中的表单校验没有触发
即，选择课程后，清空选择框，校验没有触发
只有主动调用表单的校验方法，才会触发校验，如下

html 复制代码

<el-button type="primary" @click="submitmyForm">提交</el-button>

js 复制代码

const submitmyForm = async () => {
  try {
    await myForm.value.validate();
  } catch (error) {
    console.error(error);
    return;
  }

  ElMessage.success("提交成功");
}

处理策略

选择框可以使用 change 作为触发条件

js 复制代码

const myFormRules = reactive({
  course: [{ required: true, message: "请选择课程", trigger: "change" }],
});