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>
相关文章:
ViewUI表格Table嵌套From表单-动态校验数据合法性的解决方法
项目场景: 项目需求:在表格中实现动态加减数据,并且每行表格内的输入框,都要动态校验数据,校验不通过,不让提交数据,并且由于表格内部空间较小,我仅保留红边框提示,文字…...
服务器安装Tomcat
下载Tomcat 下载地址在这: Tomcat官网 下载完成以后把压缩包上传到服务器中(我传到了www/java),进行解压(解压到),如果没有进行指定解压到哪里,默认是到root文件夹中 tar -zxvf /www/java/apache-tomcat-9.0.103.tar.…...
【Apollo】自动驾驶的平台背景,平台介绍
作者简介: 辭七七,目前大一,正在学习C/C,Java,Python等 作者主页: 七七的个人主页 文章收录专栏: 七七的闲谈 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖…...
docker 安装与配置
一、 环境准备 IP主机名操作系统版本docker版本192.168.168.128master01CentOS Linux release 7.9.2009 (Core)docker-20.10.15.tgz 二、安装 # 安装包获取 cd /root wget -c https://download.docker.com/linux/static/stable/x86_64/docker-20.10.15.tgz [rootmaster01 ~]…...
Titanic--细节记录三
目录 image sklearn模型算法选择路径图 留出法划分数据集 ‘留出’的含义 基本步骤和解释 具体例子 创造一个数据集 留出法划分 预测结果可视化 分层抽样 设置方法 划分数据集的常用方法 train_test_split 什么情况下切割数据集的时候不用进行随机选取 逻辑回归…...
k8s-----集群调度
目录 一:调度约束 二:Pod 启动创建过程 三:k8s调度过程 1、Predicate 有一系列的常见的算法 2、常见优先级选项 3、指定调度节点 (1)nodeName指定 (2)nodeSelector指定 四:亲和…...
01-Spark环境部署
1 Spark的部署方式介绍 Spark部署模式分为Local模式(本地模式)和集群模式(集群模式又分为Standalone模式、Yarn模式和Mesos模式) 1.1 Local模式 Local模式常用于本地开发程序与测试,如在idea中 1.2 Standalone模…...
HOT86-单词拆分
leetcode原题链接:单词拆分 题目描述 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。注意:不要求字典中出现的单词全部都使用,并且字典中的单词可以重复使用。 示例 1:…...
开源数据集分类汇总(医学,卫星,分割,分类,人脸,农业,姿势等)
本文汇总了医学图像、卫星图像、语义分割、自动驾驶、图像分类、人脸、农业、打架识别等多个方向的数据集资源,均附有下载链接。 该文章仅用于学习记录,禁止商业使用! 1.医学图像 疟疾细胞图像数据集 下载链接:http://suo.nz/2V…...
Linux:Firewalld防火墙
目录 绪论 1、firewalld配置模式 2、预定义服务:系统自带 3端口管理 绪论 firewalld 防火墙,包过滤防火墙,工作在网络层,centos7自带的默认的防火墙 作用是为了取代iptables 1、firewalld配置模式 运行时配置 永久配置 i…...
mysql死锁;锁表排查
概述 有时候提前终止了navicat执行线程,但是实际mysql还在执行这个线程, 需要通过mysql本身去终止. mysql:8.0 三板斧第一斧 捞点网上线程现成的执行命令 1.查询是否锁表 show OPEN TABLES where In_use > 0;2.查询进程(如果您有SUP…...
YAMLException: java.nio.charset.MalformedInputException: Input length = 1
springboot项目启动的时候提示这个错误:YAMLException: java.nio.charset.MalformedInputException: Input length 1 根据异常信息提示,是YAML文件有问题。 原因是yml配置文件的编码有问题。 需要修改项目的编码格式,一般统一为UTF-8。 或…...
无需求文档,保障测试质量的可行性做法
这篇文章,内容是:无需求文档的情况下,作为一个测试人员,应该如何做 ,才能保障测试质量不出问题,以及如何不背锅 ? 001 没有需求文档3种可能情况 : 1、公司都没产品经理࿰…...
SpringBoot项目学习笔记
第一章 SpringBoot有哪些优点? Spring Boot作为Java开发的框架和工具集,具有许多优点,这些优点有助于简化开发过程并提高效率。以下是一些主要的优点: 简化配置: Spring Boot采用约定优于配置的原则,通过自…...
如何在Vue表单处理中实现表单字段的文件下载
Vue.js 是一种流行的JavaScript框架,用于构建用户界面。在Vue应用中,我们经常需要处理表单操作,其中一个常见需求是实现文件下载。以下介绍如何在Vue表单处理中实现表单字段的文件下载,大家共同交流。 一、使用HTML的a标签实现文…...
SSL证书DV和OV的区别?
SSL证书是在互联网通信中保护数据传输安全的一种加密工具。它能够确保客户端和服务器之间的通信得以加密,防止第三方窃听或篡改信息。在选择SSL证书时,常见的有DV证书和OV证书,它们在验证标准和信任级别上有所不同。那么SSL证书DV和OV的有哪些…...
计算机竞赛 GRU的 电影评论情感分析 - python 深度学习 情感分类
1 前言 🔥学长分享优质竞赛项目,今天要分享的是 🚩 GRU的 电影评论情感分析 - python 深度学习 情感分类 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数:3分工作量:3分创新点:4分 这…...
论文阅读 - Neutral bots probe political bias on social media
论文链接:Neutral bots probe political bias on social media | EndNote Click 试图遏制滥用行为和错误信息的社交媒体平台被指责存在政治偏见。我们部署中立的社交机器人,它们开始关注 Twitter 上的不同新闻源,并跟踪它们以探究平台机制与用…...
Fabric系列 - 知识点整理
知识点 源码编译 主机编译 容器编译 手动部署(docker-compose) 单peer 多peer 中途加peer 多主机多peer 链码 语法, 接口 (go版) 命令行调用 ca server 在DApp中使用SDK调用 (js版) 部署的几个阶段 部署1排序和1节点, 1组织1通道 光部署能Dapp 带ca server (每个组织一个)…...
多目标优化算法之樽海鞘算法(MSSA)
樽海鞘算法的主要灵感是樽海鞘在海洋中航行和觅食时的群聚行为。相关文献表示,多目标优化之樽海鞘算法的结果表明,该算法可以逼近帕雷托最优解,收敛性和覆盖率高。 通过给SSA算法配备一个食物来源库来解决第一个问题。该存储库维护了到目前为…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...

