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

ops/2024/10/18 18:14:15/

因为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/ops/6422.html

相关文章

物联网社区信息化管理系统设计的毕业论文

物联网社区信息化管理系统设计的毕业论文 **摘要&#xff1a;**随着物联网技术的不断发展&#xff0c;社区信息化管理已成为智慧城市建设的重要组成部分。本文旨在设计一个基于物联网的社区信息化管理系统&#xff0c;以提升社区管理效率和服务水平。本文通过深入分析物联网技…

设计模式:访问者模式

文章目录 定义应用场景示例代码反例原则间的权衡与冲突设计模式的局限性总结与建议 定义 访问者模式&#xff08;Visitor Pattern&#xff09;是一种将算法与对象结构分离的设计模式。这种模式中&#xff0c;可以在不修改已有程序结构的前提下&#xff0c;通过添加额外的“访问…

【EXCEL自动化10】pandas提取指定数据 + 批量求和

🔥学好办公自动化,帮你节省更多宝贵的时间 🔥这个专栏收录python办公自动化的实操案例,利用python实现高效的办公自动化 🔥实现excel,word,文件批处理等自动化操作 目录 一、隔行提取二、提取指定数据三、批量求和例1. 计算多行的数据和例2. 计算多文件列的数据总和例…

[开发日志系列]PDF图书在线系统20240415

20240414 Step1: 创建基础vueelment项目框架[耗时: 1h25min(8:45-10:10)] 检查node > 升级至最新 (考虑到时间问题,没有使用npm命令行执行,而是觉得删除重新下载最新版本) > > 配置vue3框架 ​ 取名:Online PDF Book System 遇到的报错: 第一报错: npm ERR! …

Swift Publisher 5 for mac:打造精美版面

Swift Publisher 5 for mac&#xff1a;打造精美版面 Swift Publisher 5是一款专业的版面设计和编辑工具&#xff0c;为Mac用户提供了强大的设计功能和直观的操作界面。以下是关于Swift Publisher 5的功能介绍&#xff1a; 直观易用的界面&#xff1a;用户能够轻松地使用Swift …

Python 数据结构和算法实用指南(一)

原文&#xff1a;zh.annas-archive.org/md5/66ae3d5970b9b38c5ad770b42fec806d 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 数据结构和算法是信息技术和计算机科学工程学习中最重要的核心学科之一。本书旨在提供数据结构和算法的深入知识&#xff0c;以及编程…

通过Bedrock Access Gateway解决方案快速访问Amazon Bedrock的多种大语言模型

Bedrock Access Gateway&#xff08;BAG&#xff09;解决方案提供了开箱即用、兼容 OpenAI 的代理功能&#xff0c;帮助用户轻松无缝地从 OpenAI 迁移到 Amazon Bedrock。 1. 概述 亚马逊云科技的 Amazon Bedrock 服务支持一系列领先的基础模型&#xff0c;为客户提供多种选择…

P2483 【模板】k 短路 / [SDOI2010] 魔法猪学院

题目&#xff1a; 题目背景 注&#xff1a;对于 kk 短路问题&#xff0c;A* 算法的最坏时间复杂度是 O(nk \log n)O(nklogn) 的。虽然 A* 算法可以通过本题原版数据&#xff0c;但可以构造数据&#xff0c;使得 A* 算法在原题的数据范围内无法通过。事实上&#xff0c;存在使用…