当前位置: 首页 > news >正文

form中表单切换,导致 relus 中的事件无法触发,原因:页面切换不要一直切换DOM,会导致问题,需要都显示出来

修改前,因为重复渲染DOM导致绑定rules失效

在这里插入图片描述

修改前代码使用 computed 计算出渲染的DOM,影响rules事件<el-formref="form"inline:model="billDetailCopy":rules="rules"size="small"label-position="right"label-width="110px"class="addInvoice-content-input"><el-row><el-form-item v-for="(item,index) in filter(ordinaryList)" :key="index" :prop="item.key" :label="item.label" ><el-form-item/><el-form/> 

修改后,将切换的DOM使用v-show都渲染在页面,不会让rules错乱。

在这里插入图片描述

修改后各渲染各的
<el-formv-show="billDetailCopy.type === '增值税普通发票'"ref="form1"inline:model="billDetailCopy":rules="rules"size="small"label-position="right"label-width="110px"class="addInvoice-content-input"><el-row><el-form-item v-for="(item,index) in ordinaryList" :key="index" :prop="item.key" :label="item.label" ><el-form-item/><el-form/> 

form 中绑定的 rules 跟两个元素有关,才能触发rules绑定的每一个事件

1、 <el-form-item 绑定的 prop=“aaa” 在 rules中

2、v-model=“aaa” 绑定的 aaa 在 rules 中

参考链接

http://www.lryc.cn/news/123829.html

相关文章:

  • Android Ble蓝牙App(五)数据操作
  • .netcore grpc双向流方法详解
  • 【Servlet】(Servlet API HttpServlet 处理请求 HttpServletRequest 打印请求信息 前端给后端传参)
  • java中右移>>和无符号右移>>>的区别
  • 牛客周赛 Round 7
  • R语言生存分析(机器学习)(1)——GBM(梯度提升机)
  • k8s和docker简单介绍
  • Lua学习记录
  • 三分钟完美解决你的C盘内存过大爆红
  • C++ - equal(比较两个vector元素)
  • 多线程:线程池
  • 9.3.2.2网络原理(传输层TCP)
  • ssm+mybatis无法给带有下划线属性赋值问题
  • 学习笔记-JVM监控平台搭建
  • 使用css实现时间线布局(TimeLine)
  • 深入浅出 栈和队列(附加循环队列、双端队列)
  • 前端基础(二)
  • ORB-SLAM2学习笔记7之System主类和多线程
  • gin的占位符:和通配符*
  • 【量化课程】08_2.深度学习量化策略基础实战
  • 12-数据结构-数组、矩阵、广义表
  • Idea 反编译jar包
  • 【Git】安装以及基本操作
  • Spring创建Bean的过程(2)
  • Linux 终端操作命令(2)内部命令
  • 【Git】大大大问题之syntax error near unexpected token `(‘ 的错误解决办法
  • Flink源码之TaskManager启动流程
  • 加入微软MCPP有什么优势?
  • leetcode做题笔记78子集
  • Skywalking-9.6.0系列之本地源码编译并启动