父页面调用子页面的表格校验功能

实现效果（如下图）：

问题：想在父页面点击控制子页面的校验，且让组件的报错样式显示，如图样式：

代码：

<el-form :model="form" label-width="auto" :rules="rules" ref="formRef" > <el-form-item label="任务名" prop="name"> <el-input v-model="form.name" placeholder="请输入任务名" /> </el-form-item> <el-form-item label="使用方案" prop="schemeId" > <el-select v-model="form.schemeId" placeholder="请选择" > <el-option v-for="item in selectOptions" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </el-form-item> </el-form>

import { ref, reactive, } from "vue"; const formRef = ref(); const form = ref({ name: "", schemeId: "", }); const rules = reactive({ name: [{ required: true, message: "请输入方案名", trigger: "blur" }], schemeId: [{ required: true, message: "请选择使用方案", trigger: "change" }] });

重点：子组件封装函数

// 暴露表单校验方法给父组件调用 const validateForm = async () => { if (!formRef.value) { return { valid: false, errors: "表单实例不存在" }; } return new Promise((resolve) => { formRef.value.validate((valid, errors) => { resolve({ valid, errors }); }); }); }; defineExpose({ validateForm });

父组件使用：创建事件触发

<template> <sonPanel ref="sonPanelRef"/> </template> const sonPanelRef=ref() // 保存事件 const saveTask = async () => { if (sonPanelRef.value) { //当子组件存在，调用子组件函数 const { valid, errors } = await sonPanelRef.value.validateForm(); if (!valid) return //若校验失败则拦截 } }