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

Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验

在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图:

刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此篇博客留作记录,方便下次遇到类似的需求时直接开发。

			<row v-for="(item,index) in dataList"><i-Form :model="item" :ref="'dataList'+index" :label-width="language=='en'?140:120"><i-col span="10" ><Form-Item label="<@s.message code ="KSGL.LABLE.KAOSHIRQI"/>"  :rules="[{required: true, message: '必填'}]"A prop="ksrqs"><date-picker :value="item.ksrqs" @on-change="item.ksrqs=$event" format="yyyy-MM-dd" type="date" placeholder="" style="width: 200px"></date-picker></Form-Item></i-col><i-col span="10" ><Form-Item label="备注1" prop="bz"><i-Input type="text" v-model="item.bz"></i-Input></Form-Item></i-col><i-col span="4" ><i-Button size="small" type="error"	@click="handleRemove(index)"><@s.message code ='ACTION.REMOVE'/></i-Button></i-col></i-Form></row>

					let arr = [];for (var i=0;i<self.dataList.length;i++){let form = 'dataList' + i;self.$refs[form][0].validate((valid) => {if (valid) {arr.push(true);} else {arr.push(false);}});}let flag = arr.every((item) => {console.log('item',item)return item === true;});if (flag) {self.$Modal.confirm({title: i18n('MODEL.CONFIRM_TITLE'),content: i18n('MODEL.CONFIRM_CONTENT'),//loading: true,okText: i18n('MODEL.CONFIRM_OK_TEXT'),cancelText: i18n('MODEL.CONFIRM_CANCEL_TEXT'),onOk: function()  {},onCancel: function() {self.$Message.info({content:i18n('MODEL.CONFIRM_ON_CANCEL'),duration: 10,background: true,closable: true});}});} else {self.$Message.error({content:i18n('VALIDATE.FORM_ERROR'),duration: 10,background: true,closable: true});}

http://www.lryc.cn/news/175813.html

相关文章:

  • sns.load_dataset(“iris“)报错原因探究+解决办法
  • python回文素数
  • 纽扣电池16CRF1700.15,16CFR1700.20,ANSI C18.3M如何申请?
  • 10.12广州见 | 第十六届智慧城市大会报名通道全面开启
  • 2023-油猴(Tampermonkey)脚本推荐
  • 某度sign参数逆向
  • 【选型】JAVA生成PPT及选型
  • LPA*算法图文详解
  • 【Unity的HDRP渲染管线下实现好用的GUI模糊和外描边流光效果_Blur_OutLine_案例分享(内附源码)】
  • 电脑D盘格式化会有什么影响?电脑D盘格式化了怎么恢复数据
  • 【Spring】多环境切换
  • python经典百题之求10000之内的素数
  • ROS2 从头开始:第 5 部分 - 并发、执行器和回调组
  • 笔试强训Day3
  • 软考软件设计师-存储管理-文件管理-计算机网络(中
  • Vue3的学习
  • 什么是Peppol ID?如何创建?
  • Spring注解大揭秘:@Component、@Service、@Repository详解
  • Innodb底层原理与Mysql日志机制
  • 浅谈大数据背景下用户侧用电数据在电力系统的应用与发展分析
  • 20230919在WIN10下使用python3将PDF文档转为DOCX格式的WORD文档
  • PCR检测试剂——博迈伦
  • spring一个项目多个模块聚合打包问题解决方案
  • Linux设备树(Device Tree)何时被解析
  • 【Elasticsearch】数据简单操作(二)
  • 4 vCPU 实例达成 100 万 JSON API 请求/秒的优化实践
  • 呼叫中心系统有什么优势
  • 如何在linux操作系统下安装nvm
  • Linux 入门:基本指令
  • IP转地理位置:探讨技术与应用