vue element ui 一个页面中多表单切换校验规则混乱

碳酸水123

已于 2022-10-26 11:34:50 修改

阅读量1.6k

点赞数 3

文章标签： vue.js ui 前端

于 2022-07-27 11:12:31 首次发布

本文链接：https://blog.csdn.net/weixin_43937851/article/details/126010143

版权

问题描述

一个页面中有三个由dialog对话框包裹的form表单，每个表单分别有一个对应的校验规则。但用户操作切换不同表单后校验规则出现混乱，A表单的规则，在B表单中仍然生效，使得B表单功能无法实现。

三个表单如下图所示：
在这里插入图片描述三个校验规则如下所示：

解决方案：

经过分析发现，原来的写法只给dialog对话框的:visible.sync属性设置了值，来控制对话框的显示与关闭。对form表单的开关没有控制，导致表单实际上一直处于开启状态，这就使得该表单的校验规则一直在生效。
只需要给表单添加v-if属性，使得表单的开关与对话框一致，即可解决问题。同时要注意，使用v-if时，要给form添加唯一的key属性，否则也会产生多表单校验规则混乱。

//表单A，v-if值与dialog的：visible.sync一致
<el-form ref="form" :model="form" :rules="rules" label-width="90px" key="add" v-if="open">
//表单B
<el-form ref="form" :model="form" :rules="updateRules" label-width="90px" key="update" v-if="updateOpen">
//表单C
<el-form ref="form" :model="form" :rules="DateRules" label-width="90px" key="date" v-if="isOpen">

参考链接：
https://blog.csdn.net/weixin_42566993/article/details/107676334
https://blog.csdn.net/weixin_45103372/article/details/115233524
https://blog.csdn.net/weixin_43043994/article/details/104044742
https://blog.csdn.net/weixin_43334673/article/details/124082274