ViewUI表格Table嵌套From表单-动态校验数据合法性的解决方法

项目场景：

项目需求：在表格中实现动态加减数据，并且每行表格内的输入框，都要动态校验数据，校验不通过，不让提交数据，并且由于表格内部空间较小，我仅保留红边框提示，文字提示给隐藏了，不然表格内的框会很大很难看。

如果，你需要提示的话，不要show-message属性

            <Form ref="formDynamic":model="obj":label-width="15":show-message="false" //去掉这一行代码就显示校验错误信息了inline>

问题描述

提示：在表格中实现动态加减数据，并且每行表格内的输入框，都要动态校验数据

在这里插入图片描述

在这里插入图片描述

原因分析：

提示：这里我并没有用viewUI的table组件，用的是原生html做的表格，然后样式做成和table组件相似，我不用table组件，是因为组件限制太多，组件用v-for渲染表格达不到项目需求，并且内部prop也检测不到校验。

这边的代码是精简的，里面核心的代码就在这，如果不是很明白的话，下面有全部代码

           <Form ref="formDynamic":model="obj":label-width="15":show-message="false"inline><table id="formDynamic" style="border:  1px solid #e8eaec;border-collapse: collapse;"><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险费用</th><tr v-for="(item, index) in obj.modelData":key="index"style="border:  1px solid #e8eaec"><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceFee'":rules="[{required: true, type:'number', message: '请输入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceFee":show-word-limit='true':maxlength="10":disabled="Boolean(flag)"></Input></FormItem></td></tr></table></Form>

解决方案：

提示：全部代码：

  <template><Form ref="formDynamic":model="obj":label-width="15":show-message="false"inline><table id="formDynamic" style="border:  1px solid #e8eaec;border-collapse: collapse;"><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险编号</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险费用</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险类型</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险应收</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险实收</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保单欠款</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">收费开始时间</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">收费截止时间</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">备注</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">操作</th><tr v-for="(item, index) in obj.modelData":key="index"style="border:  1px solid #e8eaec"><!--                  保险编号--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceId'"style="width: 120px":rules="{required: true, message: '请输入', trigger: 'change'}"><Selectv-if="!Boolean(flag)"transferv-model="obj.modelData[index].insuranceId"@on-change="changeBd(item,index)"><Optionv-for="item in policyData":value="item.id":key="item.id">{{ item.insuranceCode }}</Option></Select><Input v-else :disabled='Boolean(flag)' v-model="obj.modelData[index].insuranceCode"></Input></FormItem></td><!--                  保险费用--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceFee'":rules="[{required: true, type:'number', message: '请输入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceFee":show-word-limit='true':maxlength="10":disabled="Boolean(flag)"></Input></FormItem></td><!--                  保险类型--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceType'":rules="{required: true, message: '请输入'}"><Input type="text" disabled v-model="item.insuranceType" placeholder="请输入..."></Input></FormItem></td><!--                  保险应收--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceReceivables'":rules="[{required: true, type:'number',  message: '请输入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceReceivables"@on-change="calculateCost(item,index)":show-word-limit='true':maxlength="10":disabled="Boolean(flag)"@input="e => handleInput(e,'insuranceReceivables')"></Input></FormItem></td><!--                  保险实收--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insurancePaid'":rules="[{required: true, type:'number',  message: '请输入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"><Inputv-model.trim.number="obj.modelData[index].insurancePaid"@on-change="calculateCost(item,index)":show-word-limit='true':maxlength="10"></Input></FormItem></td><!--                  保险欠款--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceDebt'":rules="[{required: true, validator: '',  message: '请输入',type:'number', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceDebt"disabled=""></Input></FormItem></td><!--                  收费开始时间--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.startTime'":rules="{required: true, message: '请输入'}"><DatePicker type="date"transferformat="yyyy-MM-dd"@on-change="obj.modelData[index].startTime = $event, setOptions($event,item,index,'start')"placeholder="开始时间"v-model="obj.modelData[index].startTime":disabled="Boolean(flag)"><!--                    @on-change="modelData[index].startTime = $event"--></DatePicker></FormItem></td><!--                  收费截止时间--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.endTime'":rules="{required: true, message: '请输入'}"><DatePicker type="date"transferformat="yyyy-MM-dd":options='timeOptions[timeIndex]'placeholder="截止时间"@on-change="obj.modelData[index].endTime = $event"@on-open-change="setOptions($event,item,index, 'end')"v-model="obj.modelData[index].endTime":disabled="Boolean(flag)"></DatePicker></FormItem></td><!--                  备注--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel="":label-width="0":prop="'modelData.'+index+'.remark'"><Inputv-model="obj.modelData[index].remark":show-word-limit='true':maxlength="100":disabled="Boolean(flag)"></Input></FormItem></td><!--                  操作--><td style="border:  1px solid #e8eaec;padding: 0px 7px 0px 7px;width: 180px;text-align: center"><Button type="primary" style="" @click="cuteFTP(row,index)"v-permission="'alliance:business:record:insurance:upload'">上传</Button><Poptipv-if="!flag"confirm:transfer="true"title="你确定删除吗？"@on-ok="delInsurance(index)"><Button type="error"><Icon type="md-trash"/>删除</Button></Poptip></td></tr></table></Form></template>

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

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

相关文章

【Java转Go】快速上手学习笔记（二）之基础篇一

【Java转Go】快速上手学习笔记（二）之基础篇一

目录 创建项目数据类型变量常量类型转换计数器键盘交互流程控制代码运算符 创建项目 上篇我们安装好了Go环境&#xff0c;和用IDEA安装Go插件来开发Go项目&#xff1a;【Java转Go】快速上手学习笔记&#xff08;一&#xff09;之环境安装篇 。 这篇我们开始正式学习Go语言。我…
阅读更多...
工作流自动化：提升效率、节约成本的重要工具

工作流自动化：提升效率、节约成本的重要工具

在现代社会中&#xff0c;软件和技术的运用使得我们的日常活动变得更加简单和高效。然而&#xff0c;这些技术也有自身的特点和独特之处。尽管我们使用这些工具来简化工作&#xff0c;但有时仍需要一些人工干预&#xff0c;比如手动数据录入。在工作场所中&#xff0c;手动数据…
阅读更多...
FPGA应用学习笔记--时钟域的控制 亚稳态的解决

FPGA应用学习笔记--时钟域的控制 亚稳态的解决

时钟域就是同一个时钟的区域&#xff0c;体现在laways语句边缘触发语句中&#xff0c;设计规模增大就会导致时钟不同步&#xff0c;有时差&#xff0c;就要设计多时钟域。 会经过与门的延时产生的新时钟域&#xff0c;这种其实不推荐使用&#xff0c;但在ascl里面很常见 在处理…
阅读更多...
中电金信通过KCSP认证 云原生能力获权威认可

中电金信通过KCSP认证 云原生能力获权威认可

中电金信通过KCSP&#xff08;Kubernetes Certified Service Provider&#xff09;认证&#xff0c;正式成为CNCF&#xff08;云原生计算基金会&#xff09;官方认证的 Kubernetes 服务提供商。 Kubernetes是容器管理编排引擎&#xff0c;底层实现为容器技术&#xff0c;是云原…
阅读更多...
使用爱校对提升公文材料准确性的必要性

使用爱校对提升公文材料准确性的必要性

在我们的工作中&#xff0c;公文材料的准确性往往决定了我们的工作效果。无论是内部的报告、计划&#xff0c;还是外部的公告、通知&#xff0c;都需要准确无误才能达到我们预期的效果。为此&#xff0c;我们需要使用强大的工具——爱校对&#xff0c;来提升公文材料的准确性。…
阅读更多...
深度学习1：通过模型评价指标优化训练

深度学习1：通过模型评价指标优化训练

P(Positive)表示预测为正样本&#xff0c;N(negative)表示预测为负样本&#xff0c;T(True)表示预测正确,F(False)表示预测错误。 TP&#xff1a;正样本预测正确的数量&#xff08;正确检测&#xff09; FP&#xff1a;负样本预测正确数量&#xff08;误检测&#xff09; TN…
阅读更多...
pdf怎么压缩？一分钟学会文件压缩方法

pdf怎么压缩？一分钟学会文件压缩方法

PDF文件过大一般主要原因就是内嵌大文件、重复的资源或者图片比较多&#xff0c;随之而来的问题就是占用存储空间、被平台限制发送等等&#xff0c;这时候我们可以通过压缩的方法缩小PDF文件大小&#xff0c;下面就一起来看看具体的操作方法吧。 方法一&#xff1a;嗨格式压缩大…
阅读更多...
如何通过本地搭建wamp服务器并实现无公网IP远程访问

如何通过本地搭建wamp服务器并实现无公网IP远程访问

文章目录 前言1.Wamp服务器搭建1.1 Wamp下载和安装1.2 Wamp网页测试 2. Cpolar内网穿透的安装和注册2.1 本地网页发布2.2 Cpolar云端设置2.3 Cpolar本地设置 3. 公网访问测试4. 结语 前言 软件技术的发展日新月异&#xff0c;各种能方便我们生活、工作和娱乐的新软件层出不穷&…
阅读更多...
PHP使用phpmailer及SMTP服务实现邮件发送

PHP使用phpmailer及SMTP服务实现邮件发送

博客升级中&#xff0c;把之前没有想到的功能一点点的完善。 这篇日志记录一下&#xff0c;使用phpmailer实现邮件发送的这样一个操作。 博客偶尔会有留言和评论&#xff0c;我也会及时回复&#xff0c;但是有一个问题&#xff0c;我回复了&#xff0c;给我留言的人如果不再次…
阅读更多...
JavaScript 快速入门手册

JavaScript 快速入门手册

本篇文章学习&#xff1a; 菜鸟教程、尚硅谷。 JavaScript 快速入门手册 &#x1f4af; 前言&#xff1a; 本人目前算是一个Java程序员&#xff0c;但是目前环境… ε(ο&#xff40;*))) 一言难尽啊&#xff0c;blog也好久好久没有更新了&#xff0c;一部分工作原因吧(外包真…
阅读更多...
什么是DNS服务器的层次化和分布式？

什么是DNS服务器的层次化和分布式？

DNS (Domain Name System) 的结构是层次化的&#xff0c;意味着它是由多个级别的服务器组成&#xff0c;每个级别负责不同的部分。以下是 DNS 结构的层次&#xff1a; 根域服务器&#xff08;Root Servers&#xff09;&#xff1a; 这是 DNS 层次结构的最高级别。全球有13组根域…
阅读更多...
Ajax入门+aixos+HTTP协议

Ajax入门+aixos+HTTP协议

一.Ajax入门 概念:AJAX是浏览器与服务器进行数据通信的技术 axios使用: 引入axios.js使用axios函数:传入配置对象,再用.then回调函数接受结果,并做后续处理 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>01.axios使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023