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

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

bash 复制代码
修改前代码使用 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错乱。

bash 复制代码
修改后各渲染各的
<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 中

参考链接

相关推荐
广州山泉婚姻3 分钟前
微服务时代,前后端分离架构该怎样高效协同?
前端·后端
EatFan7 分钟前
多租户系统到底怎么设计?从 tenant_id 到 JWT 租户隔离的真实实践
前端·后端·全栈·多租户
计算机魔术师13 分钟前
硅谷四大AI巨头联手踩刹车,是真心怕失控还是怕被超越?
前端
岁岁种桃花儿21 分钟前
Vue组件第六篇:Vue单文件组件
开发语言·前端·javascript·vue.js
yivifu24 分钟前
创建支持交叉链接且鼠标悬停显示注释框的HTML文件
前端·javascript·html
GreenTea1 小时前
🔥别再用压缩了,Codex、NVIDIA、DeepSeek、Uber 给出 Agent 上下文管理的新答案
前端·后端·算法
IT_陈寒1 小时前
React重渲染这坑,我跳进去又爬出来了
前端·人工智能·后端
郑州光合科技余经理3 小时前
本地生活系统:多业务订单字段怎么分账本导出
java·开发语言·前端·数据库·uni-app·php·ai编程
怕浪猫9 小时前
FDE 如何正确解决现场项目工程性的问题
前端·后端·ai编程
西瓜太郎123410 小时前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react