element表单和vxe表单联动校验的实现
作者:互联网
2026-04-09
vxetable表单编辑列全局校验 表单的结构如下
"ruleForm"
:disabled="method == 'view'"
:loading="loading"
ref="ruleForm"
class="info-form"
size="mini"
>
<vxe-table
style="width: 100%"
border
align="center"
resizable
show-overflow
:data="ruleForm.planRoadfList"
:edit-config="{
trigger: 'dblclick',
mode: 'row',
beforeEditMethod: () => method != 'view',
showStatus: true, // 显示校验报错
}"
ref="rev_vxeTable1"
:edit-rules="{ // 对表格中的编辑数据进行校验
name: [
{ required: true, message: '名字必须填写' },
],
}"
>
vxe-table>
父组件内调用提交按钮时进行校验:
this.$refs["form" + this.currentNodeId].$refs["ruleForm"].validate(
async (valid1) => {
console.log('valid1', valid1)
if (valid1) {
console.log('第一层校验通过')
if(this.currentNodeId == '23'){
// rev_vxeTable1被ruleForm包裹需要手动触发vxe校验
const errMap = await this.$refs["form" + this.currentNodeId].$refs["rev_vxeTable1"].validate(true)
// 设置为true是校验整个表格的所有行、所有字段,vxe表单内全局校验
// 会遍历data中的每一行,
// 对每一行中配置了 `editRules` 的字段都执行校验。
console.log('errMap', errMap, Object.prototype.toString.call(errMap))
// 可以查看未通过校验的信息和errMap结构
if (errMap) {
console.error('信息没填完')
return this.$message.warning('请完善填写信息');
} else {
console.log('vxe校验通过')
提交逻辑
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
sfsDb 时序数据处理指南
04/13
NineData 成功通过国家高新技术企业认定!
04/13
腾讯云轻量应用服务器管理:自动化轻量服务器 - Openclaw Skills
04/13
系统资源监控器:实时服务器健康追踪 - Openclaw Skills
04/13
前端老兵AI学习过程
04/13
工作笔记-CodeBuddy应用探索
04/13
OpenCode 完全指南:从 0 到 100K Star 的开源 AI 编码 Agent
04/13
Day11-龙虾哥打工日记:OpenClaw救援机器人 - 主系统挂了谁来救场?
04/13
Claude Code 创始人 Boris 揭秘:团队 10 倍效率技巧
04/13
拒绝“手搓”工具!带你硬核手写 MCP Server,解锁 Agent 的无限潜能
04/13
AI精选
