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

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

在这里插入图片描述

修改前代码使用 computed 计算出渲染的DOM,影响rules事件
 <el-form
        ref="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-form
        v-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 中

参考链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/71298.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WebStorm

WebStorm 介绍下载安装Activation 介绍 WebStorm是由JetBrains公司开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要专注于前端开发和Web开发。它旨在提供一套强大的工具和功能&#xff0c;以支持开发者在前端项目中编写、调试和维护代码。 JetBrains官网: …

Java中声明,定义,分配内存,初始化,赋值,是啥?

一. 声明&#xff0c;定义和分配内存 在Java中&#xff0c;声明和定义是同一个意思&#xff0c;不做区分。下面这些都是声明&#xff08;定义&#xff09;一个变量。 栈&#xff1a;存放局部变量&#xff08;包括基本数据类型的变量和对象的引用&#xff09; 堆&#xff1a;存…

配置:Terminal和oh-my-posh

目录 命令行安装oh-my-posh查看安装情况配置PowerShell启用oh-my-posh、设置主题配色安装字体Terminal中的配置 命令行安装oh-my-posh Set-ExecutionPolicy Bypass -Scope Process -Force; Invoke-Expression ((New-Object System.Net.WebClient).DownloadString(https://ohmy…

YAPi在线接口文档简单案例(结合Vue前端Demo)

在前后端分离开发中&#xff0c;我们都是基于文档进行开发&#xff0c;那前端人员有时候无法马上拿到后端的数据&#xff0c;该怎么办&#xff1f;我们一般采用mock模拟伪造数据直接进行测试&#xff0c;本篇文章主要介绍YApi在线接口文档的简单使用&#xff0c;并结合Vue的小d…

流量,日志分析--理论

提供资料&#xff1a; Wireshark 基本语法&#xff0c;基本使用方法&#xff0c;及包过虑规则 : https://blog.csdn.net/qq_17457175/article/det ails/53019490 ctf 常见流量分析题目类型 : https://ctf-wiki.org/misc/traffic/introduction/ windows 日志 : https://jone…

IntelliJ IDEA和Android studio怎么去掉usage和作者提示

截止到目前我已经写了 600多道算法题&#xff0c;其中部分已经整理成了pdf文档&#xff0c;目前总共有1000多页&#xff08;并且还会不断的增加&#xff09;&#xff0c;大家可以免费下载 下载链接&#xff1a;https://pan.baidu.com/s/1hjwK0ZeRxYGB8lIkbKuQgQ 提取码&#xf…

5.PyCharm基础使用及快捷键

在前几篇文章中介绍了PyCharm的安装和汉化,本篇文章一起来看一下PyCharm的基本用法和一些快捷键的使用方法。 本篇文章PyCharm的版本为PyCharm2023.2 新建项目和运行 打开工具,在菜单中——文件——新建项目 选择项目的创建位置(注意最好不要使用中文路径和中文名项目名称…

基于Gradio的GPT聊天程序

网上很多别人写的&#xff0c;要用账号也不放心。就自己写了一个基于gradio的聊天界面&#xff0c;部署后可以本地运行。 特点&#xff1a; 可以用openai的&#xff0c;也可以用api2d&#xff0c;其他api可以自己测试一下。使用了langchain的库 可以更改模型&#xff0c;会的…

IO密集型服务提升性能的三种方法

文章目录 批处理缓存多线程总结 大部分的业务系统其实都是IO密集型的系统&#xff0c;比如像我们面向B端提供摄像头服务&#xff0c;很多的接口其实就是将各种各样的数据汇总起来&#xff0c;展示给用户&#xff0c;我们的数据来源包括Redis、Mysql、Hbase、以及依赖的一些服务…

IP协议

网络层 对于网络层来说&#xff0c;它是传输层协议的具体实施&#xff0c;那么它具体是如何实施的呢&#xff1f; IP协议 IP能够实现将数据从A主机送到B主机&#xff0c;在网络中&#xff0c;每一个IP报文都包含了它的目标网络和目标主机。 而IP协议就是网络层使用的协议。 I…

【mysql】—— 表的约束

目录 序言 &#xff08;一&#xff09;空属性 &#xff08;二&#xff09;默认值 &#xff08;三&#xff09;列描述 &#xff08;四&#xff09;zerofill &#xff08;五&#xff09;主键 &#xff08;六&#xff09;自增长 &#xff08;七&#xff09;唯一键 &#…

stm32_断点调试无法进入串口接收中断

先说结果&#xff0c;可能是stm32调试功能/keil软件/调试器&#xff08;试过STLINK和JLINK两种&#xff09;的问题&#xff0c;不是代码&#xff1b; 1、入坑 配置完串口后&#xff0c;可以发送数据到串口助手&#xff0c;但不能接收数据并做处理&#xff0c;所以第一步&…

安全防御(3)

1.总结当堂NAT与双机热备原理&#xff0c;形成思维导图 2.完成课堂nat与双机热备试验 引用IDS是指入侵检测系统&#xff0c;它可以在网络中检测和防御入侵行为。IDS的签名是指根据已知入侵行为的特征制定的规则&#xff0c;用于检测和警告可能存在的入侵行为。签名过滤器可以根…

图论——最短路算法

引入&#xff1a; 如上图&#xff0c;已知图G。 问节点1到节点3的最短距离。 可心算而出为d[1,2]d[2,3]112,比d[1,3]要小。 求最短路径算法&#xff1a; 1.Floyd(弗洛伊德) 是一种基于三角形不等式的多源最短路径算法。边权可以为负数 表现为a[i,j]a[j,k]<a[i,k]。 …

9.2.2Socket(TCP)

一.过程: 1.建立连接(不是握手),虽然内核中的连接有很多,但是在应用程序中,要一个一个处理. 2. 获取任务:使用ServerSocket.accept()方法,作用是把内核中的连接获取到应用程序中,这个过程类似于生产者消费者模型. 3. 使用缓冲的时候,注意全缓冲和行缓冲. 4.注意关闭文件资源…

排序算法(二)

1.希尔排序-Shell Sort 1.算法原理 将未排序序列按照增量gap的不同分割为若干个子序列&#xff0c;然后分别进行插入排序&#xff0c;得到若干组排好序的序列&#xff1b; 缩小增量gap&#xff0c;并对分割为的子序列进行插入排序&#xff1b;最后一次的gap1&#xff0c;即整个…

SQL 基础查询

msyql 不区分大小写 DDL 数据定义语言 查询 show databases create database db01 创建数据库 create database if not exists db01 创建数据库 删除数据库 drop database if exists db01 使用数据库 use 数据库名 CREATE TABLE tb_user(id int PRIMARY KEY COMMENT i…

简单易用且高效的跨平台开发工具:Xojo 2023 for Mac

Xojo for Mac是Mac平台上一个跨平台的针对桌面、Web、移动和Raspberry Pi的快速应用程序开发软件。与其他多平台开发工具相比&#xff0c;Xojo for Mac为开发人员提供了显着的生产率提高。 Xojo for Mac具有拖放功能&#xff0c;使您能够快速创建用户界面设计&#xff0c;然后…

【Linux初阶】进程间通信介绍 管道

&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f; &#x1f36d;&#x1f36d;系列专栏&#xff1a;【Linux初阶】 ✒️✒️本篇内容&#xff1a;进程间通信介绍&#xff0c;管道概述&#xff0c;匿名管道应用&#xff0c;命名管道应用 &#x1f6a2;&#…

如何在 Spring Boot 中集成日志框架 SLF4J、Log4j

文章目录 具体步骤附录 笔者的操作环境&#xff1a; Spring Cloud Alibaba&#xff1a;2022.0.0.0-RC2 Spring Cloud&#xff1a;2022.0.0 Spring Boot&#xff1a;3.0.2 Nacos 2.2.3 Maven 3.8.3 JDK 17.0.7 IntelliJ IDEA 2022.3.1 (Ultimate Edition) 具体步骤 因为 …