el-form动态表单切换显示/隐藏导致的校验报错

也可以描述为el-form里的el-select change事件 控制el-card里包裹的 el-tab-pane 表单 显示/隐藏(复杂且墨迹)

下拉框切换段标时 下方el-card会显示对应的段
每个段的el-tab-pane 是用v-if=“dataForm.code == ‘X’” 判断的
因为用的是v-if 所以每次切换时 会报rules的校验错误 闪现
改为v-show后 虽然没有校验报错闪现 但是默认显示了所有的el-tab-pane

解决方法:
给每个el-form 增加不同的key 以便区分

1、v-if只有在判断为true的时候才会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。

2、v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏。

原因:两个el-form元素没有作区分标识,内部误以为是同一个元素,导致跳转时触发校验。

解决方案:给每个el-form元素添加不同的key属性值

<el-form key="aa">
</el-form>
<el-form key="bb">
</el-form>
  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值