element ui 表单使用v-if切换导致校验规则失效的解决方案

最新推荐文章于 2024-05-03 14:36:01 发布
最新推荐文章于 2024-05-03 14:36:01 发布
阅读量3.7k 收藏 30
点赞数 9
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljw_Josie/article/details/117254007
版权

现象

我用v-if切换单选，会导致已经绑定的校验规则失效。

代码

image.png

image.png

解决方案

方案很多，这里先贴出4种

  • 方案一： 给每个item加一个key作为区分

因为form-item绑定验证事件是在mounted中进行的，规则变化后没有进行重新绑定验证事件，v-if渲染组件节点diff后被复用了，所以验证也就自然失效了

image.png

  • 方案二：直接在item里写rules

image.png

  • 方案三：使用校验函数

image.png

  • 方案四：在外层包两层div

image.png

ljw_Josie
关注
  • 9
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
1. **使用`v-if`指令**：将`el-dialog`包裹在`v-if`中，确保在对话框关闭时，整个组件树会被销毁，从而避免校验状态的保留。但是，这种方法可能导致对话框的即时显示性能下降，因为它需要重新渲染整个组件。 2. **...
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
npm i element-demi element-ui # or yarn add element-demi element-ui // vue3.x + element-plus npm i element-demi element-plus # or yarn add element-demi element-plus :top_hat: 用法 Vue2 import Vue ...
【VUE的Form表单】使用v-if切换控件时，表单校验不生效
weixin_55846296的博客
09-29 3254
【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效
vue 使用v-if后 或 使用$forceUpdate()强制数据刷新之后导致表单rules校验失效问题
lilang_9920的博客
03-22 2873
vue 使用v-if后 或 使用$forceUpdate()强制数据刷新之后导致表单rules校验失效问题
vue+element实现表格v-if判断
最新发布
weixin_42678822的博客
05-03 355
【代码】vue+element实现表格v-if判断。
el-form-item中使用v-if导致规则检验不生效问题
小范先生上行中的博客
05-23 1568
背景： 项目中使用el-form表单时，常常遇到需要v-if渲染的 el-form-item组件时，使用prop设置规则校验时不生效问题 解决方法： 备注：添加 key 主键 <el-form-item key="zjgsFromName" prop="zjgsFrom.name"> <el-input v-model="fwdjForm.zjgsFrom.name"clearable/> </el-form-item> ...
el-form表单校验失效（v-if与v-show导致的问题）
qq_30678943的博客
06-16 2704
背景： 项目中有分步多个表单提交 但是表单校验里会出现部分属性校验不生效的问题 ,如下图所示，“项目路径”、"用户名"字段前已经出现红色星号 表面表单中rules prop对应的字段正确，但是点击下一步并未正常触发校验 部分表单代码如下，rules 和prop已用红框标识 那么问题来了 发生肾摸事了？怎么回事？ ...
vue使用el-table在el-table-column下使用v-if改变数据不响应
LQS5858的博客
03-16 3009
vue使用el-table在el-table-column下使用v-if改变数据不响应 代码: <el-table :data="propertyList" class="hoo-clear-table" height="100%" ref="tableRef" style="width: 100%"> <el-table-column align="l
详解element-ui 表单校验 Rules 配置 常用黑科技
10-15
在Element-UI中，表单校验是实现数据验证的关键部分，它可以帮助开发者确保用户输入的数据符合预期格式和要求。`Rules`配置是Element-UI表单组件`el-form`的核心功能之一，用于定义表单字段的验证规则，确保用户提交...
elementui的table组件，大量使用v-if导致列表渲染错乱，有的列渲染的值不对，有的列渲染出来的空值解决办法
04-11 1781
先说一下，之所以是同事那边碰到的而我这边碰不到这个问题，是因为我这边做。，其实这个问题解决起来也超级简单，平铺出来的也加上。这是同事碰上的，感觉挺奇怪的就研究了研究。这是平铺出来的，从这里可以看到到处都是。遍历出来的，vue 开发的都知道，即可，可以自己排列，也可以直接。关键词就好啦，只需要给。方式，碰不到这种问题都…，他这里是平铺出来的。
v-if与v-show对表单验证的影响以及解决办法
csdnyp的博客
04-08 3240
v-if与v-show控制元素显隐对表单验证的影响
element——v-if下form表单验证规则失效
始于足下的博客
06-28 2237
在实现管理系统时，element的form表单验证问题
ant组件radio换切导致表单校验失效
weixin_51972964的博客
08-04 965
场景: 通过单选radio配合v-if来换切form-model-item，会可能触发rules的校验条件失效，如数据要求是必填项但没有值校验依然通过 解决方法： 每个form-model-item都绑定一个唯一的key值即可 例 // 通过radio来切换 <a-radio-group v-model="type" > <a-radio :value="1"> 文字 </a-radio> <a-radio :value="2"> 图片 </a-
element-ui表单使用v-if进行触发后，表单校验错乱的问题
Heartnottowake的博客
04-28 844
表单有多个元素需要校验，但是其中某些元素是根据另一个元素的值去用v-if控制显示与隐藏,切换值得时候，就会出现校验错乱。解决方法: 给表单的el-form-item去绑定一个key,这样每次刷新验证，就会找对应的key去校验，这是唯一的。
vue中使用element ui的el-table在el-table-column下使用slot插槽v-if条件渲染没生效或者混乱
I_recluse的博客
09-21 6349
vue 引入element ui中的el-table组件时，在el-table-column下使用作用域插槽，通过v-if条件来动态显示某些元素，发现有的条目渲染没生效或者混乱
关于element-ui中，页面上有多个el-table并通过v-if、v-else等控制是否显示时，type=selection勾选框失效或不显示的问题
summer的博客
10-12 1402
刚开始是勾选框那一列直接空了什么都不显示，搜索了一下说是给el-table标签增加id，加了之后是显示了，但是点击任何选框都会直接取消全部选中效果，翻了半天源码也没发现到底是哪里事件冲突了还是怎么回事，烦了，干脆自己写勾选框了。
el-table-column标签内使用v-if判断其显示，出现列错位和列元素渲染异常的问题
热门推荐
KangMino的博客
03-14 1万+
问题描述： 根据侧边栏的选择条件，表格项有几项不同，我在el-table-column标签内使用了几个v-if渲染，结果出现列错位，并且该列元素渲染宽度和高度异常，该列元素通过props获取的值也未正确显示。 分析原因：vue的风格指南中介绍，默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会导致元素间相互影响，不能正常渲染。 总而言之就是v-if不能多次作用..
通过v-if渲染的element-ui表单,校验规则不生效
05-24
如果你使用 `v-if` 来渲染 Element UI 表单，可能会出现校验规则不生效的问题。这是因为当使用 `v-if` 来控制组件的显示和隐藏时，组件会被销毁并重新创建，此时校验规则也会被销毁，导致校验不生效。 为了解决这个问题，可以使用 `v-show` 来代替 `v-if`，或者在使用 `v-if` 的同时，给表单组件添加 `key` 属性，使其在重新创建时保留校验规则。具体做法如下： 1. 使用 `v-show` 代替 `v-if`： ```html <template> <div> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" > <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('submit success'); } else { console.log('submit error'); return false; } }); } } } </script> ``` 2. 使用 `v-if` 并添加 `key` 属性： ```html <template> <div> <el-form :model="form" label-width="80px"> <el-form-item label="用户名" prop="username" :key="key"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :key="key"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' }, key: 0 } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('submit success'); } else { console.log('submit error'); return false; } }); } }, watch: { // 监听 form 的变化，每次变化都给 key 加 1，使其重新渲染，并保留校验规则 form: { handler(val) { this.key += 1 }, deep: true } } } </script> ``` 以上两种方法均可解决校验规则不生效的问题，具体使用哪一种取决于你的实际需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值