解决ElementUI动态表单校验验证不通过

这里记录一下,写项目时遇到的一个问题:就是动态渲染的表单项,加验证规则后一直不通过!!!

原代码

html部分:

     <el-form-itemv-for="(teaclass,index) in addFom.classIds":label="`班级${index+1}`"prop="classId"><el-row :gutter="12"><el-col :span="12"><el-select v-model="teaclass.classId" placeholder="请选择"><el-optionv-for="(item) in filterOptions[index]":label="item.className":value="item.classId":key="item.classId"/></el-select></el-col><el-col :span="5"><el-button type="danger" icon="el-icon-delete" circle @click="removeClassId(index)"/></el-col></el-row></el-form-item><el-form-item><el-button type="success" @click="submitTake('ruleForm')">提交</el-button><el-button @click="addClassId" :disabled="disabled">添加班级</el-button></el-form-item>

 js部分:

 return {tableData: [],teaName: '',page: 1,total: 0,pageSize: 12,classData: [],show: false,dra: false,direction: 'rtl',addFom: {teaName: '',teaSex: true,teaType: true,teaPhone: '',seniority: 0,classIds: [{}]},classAll: [],disabled: false,rules: {teaName: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],teaSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],teaType: [{ required: true, message: '请选择类型', trigger: 'blur' }],teaPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' },{ min: 11, max: 11, message: '请输入长度11位的大陆号码', trigger: 'blur' }],seniority: [{ required: true, message: '请输入教龄', trigger: 'blur' }],classId: [{ required: true, message: '请选择班级', trigger: 'change' }]}}

结果: 

 可以看到,按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验不通过。

解决

修改prop、rules

     <el-form-itemv-for="(teaclass,index) in addFom.classIds":label="`班级${index+1}`":prop="'classIds.'+ index + '.classId'":rules="rules.NotEmpty"><el-row :gutter="12"><el-col :span="12"><el-select v-model="teaclass.classId" placeholder="请选择"><el-optionv-for="(item) in filterOptions[index]":label="item.className":value="item.classId":key="item.classId"/></el-select></el-col><el-col :span="5"><el-button type="danger" icon="el-icon-delete" circle @click="removeClassId(index)"/></el-col></el-row></el-form-item>
    rules: {teaName: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],teaSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],teaType: [{ required: true, message: '请选择类型', trigger: 'blur' }],teaPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' },{ min: 11, max: 11, message: '请输入长度11位的大陆号码', trigger: 'blur' }],seniority: [{ required: true, message: '请输入教龄', trigger: 'blur' }],NotEmpty: [{ required: true, message: '请选择班级', trigger: 'change' }]}

结果:

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Mongodb 5.0]单机启动

安装完mongodb后&#xff0c;会自动生成下面两个目录(mongod.conf中设定的)&#xff0c;用来存放日志和数据 /var/lib/mongo (数据目录) /var/log/mongodb (日志目录) 要启动一个单机版的mongodb&#xff0c;一般有两种方式&#xff1a; 第一种启动方式&#xff1a;直接使用…

Go Gin 中使用 JWT

一、JWT JWT全称JSON Web Token是一种跨域认证解决方案&#xff0c;属于一个开放的标准&#xff0c;它规定了一种Token实现方式&#xff0c;目前多用于前后端分离项目和OAuth2.0业务场景下。 二、为什么要用在你的Gin中使用JWT 传统的Cookie-Sesson模式占用服务器内存, 拓展性…

Autoware.ai1.14.0自动驾驶-Demo运行

Autoware.ai1.14.0自动驾驶-Demo运行 数据准备 下载数据&#xff1a; wget https://autoware-ai.s3.us-east-2.amazonaws.com/sample_moriyama_data.tar.gz wget https://autoware-ai.s3.us-east-2.amazonaws.com/sample_moriyama_150324.tar.gz一定要注意解压文件是在.auto…

mac arm 通过brew搭建 php+nginx+mysql+xdebug

1.安装nginx brew install nginx //安装brew services start nginx //启动2.安装php brew install php7.4 //安装export PATH"/opt/homebrew/opt/php7.4/bin:$PATH" //加入环境变量 export PATH"/opt/homebrew/opt/php7.4/sbin:$PATH"brew serv…

RFID技术应用于服饰市场

RFID技术应用于服饰市场 RFID技术已广泛应用于服饰制造加工行业&#xff0c;为企业提供了许多实用的解决方案。下面是一些常见的应用场景&#xff1a; 库存管理&#xff1a;RFID标签可以被缝制或附着在服装上&#xff0c;通过RFID读写器进行扫描。企业可以实时跟踪和管理库存…

在QT及VS运行包含opencv的cmakelists实例

本文分享如何利用QT和Visual Studio运行cmake组织管理的程序&#xff0c;也就是运行cmakelists.txt。 main和cmakelists内容 main和cmakelists文件路径如下&#xff1a; main.cpp #include<opencv2/opencv.hpp> #include<iostream> #include <string> usi…

重启服务器引发的Docker异常

公司使用云服务器需要硬盘扩容&#xff0c;服务器重启才生效。 重启以后发现拉取远程镜像的命令登录失败了&#xff01; 然后发现找不到容器和镜像列表了&#xff0c;但是容器都启动了。 查看docker运行状态都是正常的 systemctl is-active docker systemctl status docker.…

【flink】Chunk splitting has encountered exception

执行任务报错&#xff1a; Chunk splitting has encountered exception 错误信息截图&#xff1a; 完整的错误信息&#xff1a; 16:30:43,911 ERROR org.apache.flink.runtime.source.coordinator.SourceCoordinator [SourceCoordinator-Source: CDC Sourceorg.jobslink.flink…

开启想象翅膀:轻松实现文本生成模型的创作应用,支持LLaMA、ChatGLM、UDA、GPT2、Seq2Seq、BART、T5、SongNet等模型,开箱即用

开启想象翅膀&#xff1a;轻松实现文本生成模型的创作应用&#xff0c;支持LLaMA、ChatGLM、UDA、GPT2、Seq2Seq、BART、T5、SongNet等模型&#xff0c;开箱即用 TextGen: Implementation of Text Generation models 1.介绍 TextGen实现了多种文本生成模型&#xff0c;包括&a…

web-csrf

目录 CSRF与XSS的区别&#xff1a; get请求 原理&#xff1a; pikachu为例 post请求 pikachu为例 CSRF与XSS的区别&#xff1a; CSRF是借用户的权限完成攻击&#xff0c;攻击者并没有拿到用户的权限&#xff0c;而XSS是直接盗取到了用户的权限 get请求 原理&#xff1a;…

15-1_Qt 5.9 C++开发指南_Qt多媒体模块概述

多媒体功能指的主要是计算机的音频和视频的输入、输出、显示和播放等功能&#xff0c;Qt 的多媒体模块为音频和视频播放、录音、摄像头拍照和录像等提供支持&#xff0c;甚至还提供数字收音机的支持。本章将介绍 Qt 多媒体模块的功能和使用。 文章目录 1. Qt 多媒体模块概述2. …

时间序列预测任务下探索深度学习参数对模型预测性能的影响

时间序列相关的项目在我之前的很多博文中都有涉及&#xff0c;覆盖的数据领域也是比较广泛的&#xff0c;很多任务或者是项目中往往是搭建出来指定的模型之后就基本完成任务了&#xff0c;比较少去通过实验的维度去探索分析不同参数对模型性能的影响&#xff0c;这两天正好有时…

段页式储存结构

题目&#xff1a;假设段页式储存结构系统中的地址结构如下图所示 从图中可知段号22-31占了10位&#xff0c;页号12-21占了10位&#xff0c;页内地址0-11占了12位 段&#xff1a; 最多有2^101024个段 页&#xff1a;每段最大允许2^101024个页 页的大小&#xff1a; 2^124x2^1…

dotNet 之网络TCP

**硬件支持型号 点击 查看 硬件支持 详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 DTU902 产品详情 G5501 产品详情 ARM dotnet 编程 dotNet使用TCP&#xff0c;可以使用Socket和TcpClient 、TcpListener类 2种&#xff0c;对于高级用户&…

激光与光电子学进展, 2023 | 非视域成像技术研究进展

注1&#xff1a;本文系“计算成像最新论文速览”系列之一&#xff0c;致力于简洁清晰地介绍、解读非视距成像领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; CVPR, ICCV, ECCV, SIGGRAPH, TPAMI; Light‑Science & Applications, Optica 等)。 本次介绍的论…

nodejs+vue+elementui健身俱乐部网站rix1z

为设计一个安全便捷&#xff0c;并且使用户更好获取本健身俱乐部管理信息&#xff0c;本文主要有安全、简洁为理念&#xff0c;实现用户快捷寻找健身课程、健身器材、会员卡信息、新闻公告等信息&#xff0c;从而解决健身俱乐部管理信息复杂难辨的问题。该系统以vue架构技术为基…

UML-类图和对象图

目录 类图概述&#xff1a; 1.类: 2.属性: 3.类的表示&#xff1a; 4.五种方法: 类图的关系&#xff1a; 1.关联 2.聚合 3.组合 4.依赖 5.泛化 6.实现 对象图概述&#xff1a; 1. 对象图包含元素: 2. 什么是对象 3.对象的状态可以改变: 4.对象的行为 5.对象标…

数据可视化工具LightningChart .NET正式发布v10.5.1——拥有全新的3D新功能

LightningChart.NET完全由GPU加速&#xff0c;并且性能经过优化&#xff0c;可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D&#xff0c;高级3D&#xff0c;Polar&#xff0c;Smith&#xff0c;3D饼/甜甜圈&#xff0c;地理地图和GIS图表以及适用于科学…

C++笔记之单例模式

C笔记之单例模式 参考笔记&#xff1a;C笔记之call_once和once_flag code review 文章目录 C笔记之单例模式1.返回实例引用2.返回实例指针3.单例和智能指针share_ptr结合4.单例和std::call_once结合5.单例和std::call_once、unique_ptr结合 1.返回实例引用 代码 #include <…