通过v-if渲染的element-ui表单,校验规则不生效的问题

news/2024/9/23 19:09:05/

因为form-item绑定验证事件是在mounted中进行的,规则变化后没有进行重新绑定验证事件,v-if渲染组件节点diff后被复用了,所以验证也就自然失效了

例如:通过动态选择类型来控制驾驶人是否显示,并且是必填项

  1. 给每一个el-form-item添加一个key属性区分【亲测有效】
<el-form-item label="类型:" prop="myType"><el-select v-model="addForm.myType" placeholder="请选择类型"><el-option v-for="item in typeList" :key="item.value" :label="item.label":value="item.value"></el-option></el-select>
</el-form-item>
<!-- 此处需加key 否则校验不起作用 -->
<el-form-item v-if="addForm.myType== '9'"  prop="driver" label="驾驶人" key="1"><el-option v-for="item in driverList" :key="item.value" :label="item.label":value="item.value"></el-option>
</el-form-item>
  1. 直接在el-form-item中写rules
<el-form-item label="类型:" prop="myType"><el-select v-model="addForm.myType" placeholder="请选择类型"><el-option v-for="item in typeList" :key="item.value" :label="item.label":value="item.value"></el-option></el-select>
</el-form-item>
<el-form-item v-if="addForm.myType== '9'"  prop="driver" label="驾驶人" :rules="{ required: true, message: '请选择驾驶人', trigger: 'blur' }"><el-option v-for="item in driverList" :key="item.value" :label="item.label":value="item.value"></el-option>
</el-form-item>

http://www.ppmy.cn/news/1428088.html

相关文章

TCP/IP协议—HTTP

TCP/IP协议—HTTP HTTP协议HTTP通讯特点HTTP通讯流程 HTTP请求报文请求方法 HTTP应答报文状态码 HTTP协议 超文本传输协议&#xff08;Hypertext Transfer Protocol&#xff0c;HTTP&#xff09;是一种请求-响应的协议&#xff0c;用户可以通过HTTP向服务器上传、下载数据。HT…

项目7-音乐播放器5+注册账号

前端之登录注册页面案例_前端登录页面-CSDN博客 1.前端代码 MAPPER Insert("insert into user(username,password) values (#{username},#{password}) ")Integer insertUserInfo(String username,String password); Service public Result insertUserInfo(String…

解释器模式:构建领域特定语言的强有力工具

在软件开发中&#xff0c;我们经常需要处理表达式或语言的解析。解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;用于设计一个能够解释特定语言中语句的语法的框架。这种模式特别适合于构建领域特定语言&#xff08;DSL&#xff09;&a…

欧拉公式;傅里叶变换;耳朵:声波(音频)眼睛:光波(图像) 大脑:傅里叶快速变换

目录 复分析 复数指数函数 欧拉公式 a点向量,方向和长度的向量;

代码随想录训练营Day 24|Python|Leetcode|491.递增子序列* 46.全排列* 47.全排列 II

491.非递增子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一种特殊情况…

windows安装多版本node.js

首先&#xff0c;你需要安装 nvm。如果你还没有安装 nvm&#xff0c;你可以在 bash 或者其他类似的 shell 中运行以下命令进行安装&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash这将下载并运行 nvm 的安装脚本。注意&#xf…

汽车牌照-C++

Description 小Y最近发现街上的汽车越来越多了.作为汽车的重要标志一汽车牌照也是越来越不够用了&#xff0c;已经从以前的十进制发展到三十六进制了.比如以前的一个汽车牌照“苏D88888&#xff0c;现在的牌照“苏DOYY11"。 小Y突发奇想&#xff0c;想知道他看到的大量汽…

FreeLearning C/C++ 译文集翻译完成

C 高级编程C 高级编程秘籍Qt Creator 应用开发C 游戏编程入门指南C 编程入门指南Boost.Asio C 网络编程Boost C 应用开发秘籍第二版C 数据结构与算法设计原理C Qt5 GUI 编程C 高性能编程C 反应式编程C 系统编程秘籍C 研讨会C 现代嵌入式编程秘籍C 专家编程&#xff1a;成为熟练…