vue2的element的table组件使用form校验

1.需求描述

vue2有时候做自增表格el-table,希望能够带一些校验,但又不想手搓校验逻辑,可以借用el-form的校验逻辑。

2.代码处理

1. html

<template><div class="sad-cont"><el-form ref="form" :model="form"><el-table :data="form.tableData" border size="mini"><el-table-column align="center" prop="other" label="名称" width="230"><template slot-scope="scope">{{ scope.row.min }} ~ {{ scope.row.max }}</template></el-table-column><el-table-column align="center" prop="min" label="最小值" width="230"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.min'" :rules="ruleForm.min"><el-input-number v-model="scope.row.min" placeholder="请输入最小值" controls-position="right" /><template slot="error" slot-scope="itemScope"><!-- 自定义错误信息 --><div v-if="itemScope.error"><el-tooltip :content="itemScope.error" placement="top"><i class="el-icon-warning-outline sad-item-error" /></el-tooltip></div></template></el-form-item></template></el-table-column><el-table-column align="center" prop="max" label="最大值" width="230"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.max'" :rules="ruleForm.max"><el-input-number v-model="scope.row.max" placeholder="请输入最大值" controls-position="right" /><template slot="error" slot-scope="itemScope"><!-- 自定义错误信息 --><div v-if="itemScope.error"><el-tooltip :content="itemScope.error" placement="top"><i class="el-icon-warning-outline sad-item-error" /></el-tooltip></div></template></el-form-item></template></el-table-column><el-table-column fixed="right"><template slot="header"><div><span>操作</span><el-tooltip content="添加数据" placement="top"><el-buttonsize="mini"icon="el-icon-plus"class="table-icon-style sad-btn2"@click="addRow()"/></el-tooltip></div></template><template slot-scope="scope"><el-buttonsize="mini"type="success"class="table-icon-style"@click="deleteRow(scope.row, scope.$index)">删除</el-button></template></el-table-column></el-table></el-form><div><el-button type="primary" @click="submitData">确 定</el-button></div></div>
</template>

2. js

import { notEmpty, isEmpty } from '@/utils/validate';export default {components: {},props: {//  默认数据defaultData: {type: Array,default() {return [];}}},data() {return {form: {tableData: []},rules: {},ruleForm: {min: [{ required: true, message: '请输入最小值', trigger: 'blur' },{ validator: (rule, value, callback) => this.validateValue(rule, value, callback, 'min'), trigger: 'blur' }],max: [{ required: true, message: '请输入最大值', trigger: 'blur' },{ validator: (rule, value, callback) => this.validateValue(rule, value, callback, 'max'), trigger: 'blur' }]}};},created() {this.initData();},methods: {notEmpty, isEmpty,//  初始化initData() {const { defaultData, form: { tableData }} = this;tableData.push(...defaultData.map(item => {return {max: item.max,min: item.min};}));},//  校验数据validateValue(rule, value, callback, key) {const { form: { tableData }} = this;const { field } = rule;const fieldKeys = field.split('.');const index = fieldKeys[1];const data = tableData[index];const maxValue = 999999999;const minValue = maxValue * -1;if (notEmpty(data.max) && notEmpty(data.min)) {if (data.max < data.min) {const text1 = key === 'max' ? '最大值' : '最小值';const text2 = key === 'max' ? '最小值' : '最大值';const text3 = key === 'max' ? '小于' : '大于';callback(new Error(`${text1}不得${text3}${text2}!`));return;}} else {if (key === 'max') {if (value * 1 > maxValue) {callback(new Error(`最大值不得大于${maxValue}!`));return;} else { /**/ }} else if (key === 'min') {if (value * 1 < maxValue) {callback(new Error(`最小值不得小于${minValue}!`));return;} else { /**/ }} else { /**/ }}callback();},//  导出数据表deleteRow(row, index) {const { form: { tableData }} = this;tableData.splice(index, 1);},// 添加一行记录addRow() {const { form } = this;form.tableData.push({min: 0,max: 10});},//  关闭表单closeForm() {this.$emit('closeForm');},//  子组件触发form事件submitData() {this.$refs['form'].validate((valid) => {if (valid) {const { form: { tableData }} = this;const obj = {};const returnData = [];tableData.forEach(item => {const { max, min } = item;const text = `${min}~${max}`;if (!obj[text]) {const each = {name: text,min: min,max: max};obj[text] = each;returnData.push(each);} else { /**/ }});this.$emit('submitForm', returnData);} else {console.log('error submit!!');return false;}});}}
};

3.样式优化

提示样式必须处理,这样才能在表格内显示正常!!!

.el-form-item{margin-bottom: 0;
}
.sad-item-error{position: absolute;color: #F56C6C;top: 0;left: 100%;line-height: 32px;
}
.sad-cont{min-height: 200px;
}
.sad-btn2{padding: 2px 5px;
}

3. 效果如下

在这里插入图片描述

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

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

相关文章

LabVIEW传感器虚拟综合实验系统

LabVIEW传感器虚拟综合实验系统 开发了一个基于LabVIEW的传感器虚拟综合实验系统&#xff0c;该系统集成了NIELVIS和CSY系列传感器实验平台&#xff0c;通过图形化编程语言进行数据处理和实验管理。系统允许用户进行多种传感器参数的测量和实验报告的自动生成&#xff0c;支持…

不装了,我是知识星球的星主,我摊牌了~

作者&#xff1a;哈哥撩编程 &#xff08;视频号同名&#xff09; 图书作者&#xff1a;程序员职场效能宝典 博客专家&#xff1a;全国博客之星第四名 超级个体&#xff1a;COC上海社区主理人 特约讲师&#xff1a;谷歌亚马逊分享嘉宾 科技博主&#xff1a;极星会首批签约…

关系代数与规范化

本文是根据自己的理解&#xff0c;结合实践整理所得&#xff0c;有兴趣的可以参考学习。

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于麻雀搜寻优化算法的代理购电用户用电量多维度协同校核》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

php: centos+apache 启动php项目

指导文件 &#xff1a;PHP: Apache 2.x on Unix systems - Manual 下载路径 &#xff1a;Index of /httpd configure: error: APR not found. 解决方案&#xff1a; APR&#xff08;Apache Portable Runtime&#xff09;库。APR是Apache HTTP服务器的可移植运行时环境&…

前端列表可滚动,可轮播

前端列表可滚动&#xff0c;可轮播 <ulclass"scroll-list"ref"scroll_List"mouseenter"cancelScroll()"mouseleave"autoScroll()"><liclass"list-item"v-for"(item,index) in tableData3":class"[…

VMware workstations 安装华为OpenEuler操作系统,以及UKUI桌面环境的安装

现在华为OpenEuler操作系统官网下载&#xff0c;此次OpenEuler操作系统版本为20.03LTS-SP3&#xff0c;下载链接如下&#xff1a; https://www.openeuler.org/zh/download/archive/ 下载成功后如下图所示&#xff1a; 使用VMware workstations 进行安装&#xff08;VMware w…

ES6真题合集(一)

ES6真题合集&#xff08;一&#xff09; 1. var、let、const之间的区别2. ES6中数组新增了哪些扩展2.1 扩展运算符2.2 Array.from() 方法2.3 Array.of() 方法2.4 find() 和 findIndex() 方法2.5 箭头函数2.6 模板字符串 3. ES6中对象新增了哪些扩展3.1 属性的简写3.2 属性名表达…

vue2中使用tinymce

vue2中使用tinymce的记录 本篇文章主要实现的功能&#xff1a; &#xff08;1&#xff09;【查看】时禁用编辑 &#xff08;2&#xff09;【编辑】时某些内容是不可编辑的 &#xff08;3&#xff09;【内容】前端拼接编辑器模板 &#xff08;4&#xff09;【内容】编辑器模板中…

泛微开发修炼之旅--06自定义Action接口开发示例、源码及使用场景

文章链接&#xff1a;泛微开发修炼之旅--06自定义Action接口开发示例、源码及使用场景

杨校老师项目之SpringBoot整合Vue超市管理系统

1.获取代码&#xff1a; 有偿获取&#xff1a;mryang511688 2.技术栈 SpringBoot MySQL mybatis Plus Redis 摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;超市进销存系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff…

qlv文件怎么转换成mp4,qlv文件转换成mp4文件的工具软件

qlv转MP4的方法&#xff0c;一直是广大视频爱好者关注的问题。qlv是一种较为特殊的视频格式&#xff0c;而MP4则以其广泛的兼容性和优秀的播放效果&#xff0c;成为众多设备上的首选格式。因此&#xff0c;掌握qlv转MP4的技巧&#xff0c;对于提升视频观看体验至关重要。本文将…

pytorch(其他操作)

文章目录 1.torch.atleast_1d()2.torch.atleast_2d()3.torch.bincount()4.torch.block_diag()5.torch.broadcast_tensors()6.torch.broadcast_shapes()7.torch.bucketize()8.torch.cartesian_prod()9.torch.cdist()10.torch.clone()11.torch.cummax()12.torch.cummin()13.torch…

队列及其应用

实验内容 请设计一个简单的模拟银行排队系统&#xff0c;要求程序具有以下4项菜单&#xff1a; 1.取号。选择该菜单后&#xff0c;为客户产生一个排队号。 2.叫号。选择该菜单后&#xff0c;显示可服务的客户排队号。 3.查看队伍。从队首到队尾列出所有排队客户的排队号。 4.退…

【机器学习】YOLOv10与YOLOv8分析

YOLOv10与YOLOv8&#xff1a;实时目标检测技术的演进与对比 一、YOLOv8与YOLOv10的概述二、YOLOv8的特点与优势三、YOLOv10的改进与创新四、YOLOv10与YOLOv8的性能对比五、总结与展望 随着深度学习技术的飞速发展&#xff0c;实时目标检测技术已成为计算机视觉领域的研究热点。…

关于yolov8识别滑块关键点

1&#xff0c;images,annotations创建 IMAGES&#xff1a;放图片材料的 ANNTATIONS&#xff1a;放labelImg标记的xml文件 2&#xff0c;labels,txt怎么来的 labels &#xff1a;可以手动创建&#xff0c;里面还配置了train,val,test文件夹。可手动&#xff08;以下代码中没有写…

【渗透测试】DC-1靶机实战(下)SSH爆破提权

【渗透测试】DC-1靶机实战&#xff08;上&#xff09;漏洞扫描获取反弹shell-CSDN博客 7.SSH爆破 hydra ssh://172.20.10.4 -l flag4 -P /usr/share/john/password.lst -t 64 -f -vV -o /tmp/hydra.sshssh://10.10.10.31&#xff1a;指定了要攻击的 SSH 服务的地址。 -l flag…

医学编码系统说明

简介 流程说明 登录系统 在浏览器中访问FNEHR的站点&#xff0c;输入医院编号、用户和密码&#xff0c;选择“Other”&#xff0c;点击“Login”按钮&#xff0c;登录系统&#xff1a; 登录后&#xff0c;在左边显示系统的菜单&#xff1a; 系统设置 医院设置 点击左侧的“Acc…

【电赛】STM32-PID直流减速电机小车【寻迹+避障+跟随】【更新ing】

一.需求分析 1.主控&#xff1a;STM32C8T6&#xff08;没什么好说的哈哈&#xff09; 2.电机&#xff1a;JAG25-370电机 【问】为什么要用直流减速电机&#xff1f;&#xff1f; PID控制器需要依靠精确的反馈信号来调整其输出&#xff0c;确保电机按照预定的速度和位置运行…

用python写一个基于PyQt5和OpenAI的智能问答项目

摘要&#xff1a; 使用python写一个可以对话的智能问答机器人&#xff0c;界面是使用PyQt5写的&#xff0c;通过调用OpenAl的免费接口&#xff0c;实现实时聊天功能。 1.申请免费的API key 前往页面https://github.com/chatanywhere/GPT_API_free 点击下面链接&#xff1a; …