当前位置: 首页 > news >正文

el-form动态检验无法生效问题(已解决)

要对el-form里面的字段动态生成校验规则,测试了一系列的骚操作也无法生效,要么是require视图生效了,校验规则还是不生效;看了csdn里面好多方案,都是废话,废话,直接上硬货,最终总结如下:

         <el-form :rules="rules" ref="auditForm" :model="auditForm" label-width="100px"><el-form-item label="审核结果:" prop="auditStatus"><el-radio-group v-model="auditForm.auditStatus" @change="updateFormRules"><el-radio label="Y">通过</el-radio><el-radio label="N">不通过</el-radio></el-radio-group></el-form-item><el-form-item label="审核意见:" prop="remark"><el-inputv-model="auditForm.remark"placeholder="请输入"type="textarea":rows="2"clearablemaxlength="200"show-word-limit/></el-form-item></el-form>

需求描述:选择审核结果为"N",不通过时,审核意见为必填,否则为不必填。

原本的rules里面不必去填写审核意见的校验

     rules: {auditStatus: [{ required: true, message: '请选择', trigger: 'blur' }]},

方案一:监听审核结果的change事件,去动态增加审核意见的规则
方案二:使用watch去监听审核结果的值,去动态增加审核意见的规则

    updateFormRules () {if (this.auditForm.auditStatus === 'N') {this.$set(this.rules, 'remark', [{ required: true, message: '请输入审核意见', trigger: 'blur' },{ min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }]);} else {this.$set(this.rules, 'remark', []);}this.$nextTick(() => {this.$refs.auditForm.clearValidate(); // 清除表单验证规则this.$refs.auditForm.validate(); // 重新验证表单});},```
http://www.lryc.cn/news/165145.html

相关文章:

  • 【python】代码学习过程问题总结
  • Qt应用开发(基础篇)——菜单 QMenu
  • MySQL-DDL语句
  • 总结987
  • 【服务器 | 测试】如何在centos 7上面安装jmeter
  • 20.04部署cartographer
  • djangoMTV初探
  • Minecraft--基于云服务器搭建自己的服务器--简易搭建
  • 【数据结构与算法】十大经典排序算法
  • Android 12.0 SystemUI下拉状态栏定制化之隐藏下拉通知栏布局功能实现(一)
  • 665. 非递减数列-先改后验法
  • 调教 文心一言 生成 AI绘画 提示词(Midjourney)
  • 半导体制造工艺(一)光刻
  • 【海思SS626 | 开发环境】VMware17安装Ubuntu 18.04.6
  • Vue知识系列(3)每天10个小知识点
  • Java基础入门·多线程·线程池ThreadPool篇
  • Trinitycore学习之在vscode查看远端服务器上源码配置
  • 583. 两个字符串的删除操作 -- 动规
  • SOME/IP
  • [2023.09.12]: Yew应用开发的第一个hook--use_state
  • 使用Langchain+GPT+向量数据库chromadb 来创建文档对话机器人
  • Spring Cloud(Finchley版本)系列教程(一) 服务注册与发现(eureka)
  • 【大数据】美团 DB 数据同步到数据仓库的架构与实践
  • 分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测
  • mac使用squidMan设置代理服务器
  • 大数据Flink(七十八):SQL 的水印操作(Watermark)
  • 【Linux】Qt Remote之Remote开发环境搭建填坑小记
  • ATFX汇市:离岸人民币大幅升值,昨日盘中跌破7.3关口
  • Spring Boot 配置 Knife4j
  • Java项目中遇到uv坐标如何转换成经纬度坐标