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.mzph.cn/news/35751.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

selenium官网文档阅读总结(day 4)

1.selenium的工作原理 selenium的工作原理涉及以下主要组件和步骤&#xff1a; &#xff08;1&#xff09;WebDriver:这是selenium的核心组件&#xff0c;它是一个用于控制浏览器的API。WebDriver提供了许多方法&#xff0c;用于在浏览器中模拟用户操作。不同的浏览器需要相应…

掌握Python的X篇_39_继承

本篇将会是本专栏关于python基本语法的最后一个知识点&#xff0c;后期将会谈python&#xff0c;就会介绍使用python专题&#xff0c;例如&#xff1a;做爬虫、有架构的网站。 文章目录 1. 为什么需要继承2. 继承的基本概念3. python中继承的基础语法4. 总结 1. 为什么需要继承…

NLP语言模型概览

语言模型结构分类 Encoder-Decoder&#xff08;Transformer&#xff09;: Encoder 部分是 Masked Multi-Head Self-Attention&#xff0c;Decoder 部分是 Casual Multi-Head Cross-Attention 和 Casual Multi-Head Self-Attention 兼具。比如T5&#xff0c;BART&#xff0c;MA…

腾讯云轻量服务器和云服务器的CPU处理器有差别吗?

腾讯云轻量应用服务器和CVM云服务器的CPU处理器性能有差别吗&#xff1f;创建轻量应用服务器时不支持指定底层物理服务器的CPU型号&#xff0c;腾讯云将随机分配满足套餐规格的物理CPU型号&#xff0c;通常优先选择较新代次的CPU型号。而云服务器CVM的CPU处理器型号、主频都是有…

JAVA设计模式----原型设计模式

文章目录 一、简介二、实现方式三、原型模式的注意事项浅拷贝与深拷贝浅拷贝深拷贝一、简介 定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象。 类型:创建类模式 类图: 原型模式主要用于对象的复制,它的核心是就是类图中的原型类Prototype。Protot…

下载程序到西门子PLC

更多关于西门子S7-200PLC内容请查看&#xff1a;西门子200系列PLC学习课程大纲 下载西门子200PLC程序分以下两步&#xff1a; 一.编译程序 1. 如下图1-1所示&#xff0c;使用PPI电缆将PLC和电脑连接上&#xff0c;注意笔记本使用USB转PPI电缆&#xff0c;连接保证给PLC单独供…

Linux(进程间通信详解)

进程间通信&#xff0c;顾名思义&#xff0c;就是进程与进程之间互通信交流&#xff0c;OS保证了各进程之间相互独立&#xff0c;但这不意味着进程与进程之间就互相隔离开&#xff0c;在不少的情况下&#xff0c;进程之间需要相互配合共同完成某项6任务&#xff0c;这就要求各进…

怎样学会单片机

0、学单片机首先要明白&#xff0c;一个单片机啥也干不了&#xff0c;学单片机的目的是学习怎么用单片机驱动外部设备&#xff0c;比如数码管&#xff0c;电机&#xff0c;液晶屏等&#xff0c;这个需要外围电路的配合&#xff0c;所以学习单片机在这个层面上可以等同为学习单片…

JVM:运行时数据区域(白话文)

最近有时间在看一本<深入了解Java虚拟机>的书籍&#xff0c;这本书是一个中国人&#xff0c;名叫周志明的人写的。相比于其他翻译过来的技术书籍&#xff0c;这本书还是挺通俗易懂的。先前有和彬哥在聊&#xff0c;他说如果是自己一个人看的话会很枯燥&#xff0c;很难坚…

双端列表 —— Deque 接口概述,使用ArrayDeque实现队列和双端队列数据结构

Deque接口简介 Deque译为双端队列&#xff0c;在双向都能作为队列来使用&#xff0c;同时可用作栈。Deque接口的方法是对称成比例的。 Deque接口继承Queue接口&#xff0c;因此具有Queue&#xff0c;Collection&#xff0c;Iterable的方法属性。 双端队列的工作原理 在常规队…

前端架构师的能力要求:打造可靠、灵活和可扩展的Web应用

随着互联网技术迅猛发展&#xff0c;现代Web应用程序变得越来越复杂且功能强大。作为一名前端架构师&#xff0c;在这个快节奏且竞争激烈的环境中&#xff0c;你需要具备广泛而深入地技术知识&#xff0c;并且有能力设计、开发和维护高度可靠、灵活和可扩展性强的Web应用。 深入…

前端发送请求和后端springboot接受参数

0.xhr、 ajax、axios、promise和async/await 和http基本方法 xhr、 ajax、axios、promise和async/await都是异步编程和网络请求相关的概念和技术&#xff01; xhr&#xff1a;XMLHttpRequest是浏览器提供的js对象&#xff08;API&#xff09;&#xff0c;用于请求服务器资源。…

百度百科词条要如何才能符合要求,上百度百科平台

百度百科词条对于内容的审核一直是比较严格的&#xff0c;因此必须符合百度百科词条平台规则&#xff0c;才能够上百度百科平台&#xff0c;下面洛希爱做百科网和大家分享百度百科词条上平台的内容和规则要求。 1&#xff0c; 首先&#xff0c;百度百科需要知道的是我们要以公益…

Java基础集合框架学习(上)

文章目录 初识基础框架为什么使用集合框架集合框架的继承关系ArrayList入门案例单元测试和增删改查单元测试的注意事项LinkedList入门案例ArrayList底层是数组LinkedList底层是链表ArrayList和LinkedList选型ArrayList存放DOG对象 初识基础框架 Java基础集合框架是Java编程语言…

jvm里的内存溢出

目录 堆溢出 虚拟机栈和本地方法栈溢出&#xff08;栈溢出很少出现&#xff09; 方法区和运行时常量池溢出 本机内存直接溢出&#xff08;实际中很少出现、了解即可&#xff09; 堆溢出 堆溢出&#xff1a;最常见的是大list&#xff0c;list里面有很多元素 堆溢出该怎么解决…

ArcGIS入门操作手册

一.ArcGIS安装过程 参考本人博客&#xff1a;保姆级Arcgis安装图文安装教程_追忆苔上雪的博客-CSDN博客 二.ArcGIS植被指数计算 (1)使用工具&#xff1a;栅格计算器 打开软件&#xff0c;右侧搜索栅格计算器打开&#xff0c;要是搜索栏不小心叉掉找不到了&#xff0c;可以通…

docker-desktop数据目录迁移

1.退出docker-desktop后执行 wsl --list -v 如下 NAME STATE VERSION * docker-desktop Stopped 2docker-desktop-data Stopped 22.执行以下命令进行数据导出&#xff1a;&#xff08;需要等待命令执行完成&#xff09…

SpringCache的介绍和入门案例

文章目录 概述常用注解入门案例 概述 Spring Cache是Spring框架提供的一个缓存抽象层&#xff0c;用于在应用程序中实现缓存的功能。它通过在方法执行前检查缓存中是否已经存在所需数据&#xff0c;如果存在则直接返回缓存中的数据&#xff0c;如果不存在则执行方法体&#xf…

定义行业新标准?谷歌:折叠屏手机可承受20万次折叠

根据Patreon账户上的消息&#xff0c;Android专家Mishaal Rahman透露&#xff0c;谷歌计划推出新的硬件质量标准&#xff0c;以满足可折叠手机市场的需求。Android原始设备制造商&#xff08;OEM&#xff09;将需要完成谷歌提供的问卷调查&#xff0c;并提交样品设备进行严格审…

MySQL慢查询日志常用参数配置

慢查询日志 slow log&#xff1a;指query time减去lock time的时间&#xff0c;超过设置的阈值的查询SQL。 常用配置 #通用配置需配置在mysqld标签先&#xff0c;版本独有配置在mysqld-version标签下 [mysqld] #是否开启慢日志,Type:Boolean Default Value:OFF slow_log0/1…