【VUE】el-table表格内输入框或者其他控件规则校验实现
1、封装组件
1、规则校验一般基于form表单实现,因此需要给具体控件套一层form表单
新建组件input-required.vue,内容如下
<template><div><el-form ref="formRef" :model="form" :rules="formRules" label-width="0px" style="font-size:0.6vw"><el-form-item :prop="this.propValue"><el-inputv-model="value":placeholder="`请输入${labelValue}`"autocomplete="off":disabled="isDisalbed"@change="isValid"></el-input></el-form-item></el-form></div>
</template><script>export default {data() {return {value: "",form: {},formRules: {}};},// 子组件使用props来接收父组件内传过来的数据props: ["propValue", "labelValue", "isDisalbed", "indexValue"],created() {// 给子组件的对象动态添加属性并设置属性值this.$set(this.form, this.propValue, "");this.$set(this.formRules, this.propValue, [{ required: true, message: `${this.labelValue}不能为空`, trigger: "blur" }]);},methods: {// el-input失去焦点后会校验数据,空的话会提示,符合校验规则会触发父组件内方法更新视图数据isValid() {let flag = null;this.form[this.propValue] = this.value;this.$refs["formRef"].validate(valid => {if (valid) {flag = true;this.$emit("updateData", this.form, this.indexValue);} else {flag = false;}});// 把每次校验的结果返回给父组件return flag;}},};
</script><style>
</style>
2、组件使用
组件引入
import InputRequired from "/src/components/inputRequired/input-required.vue";
components: {InputRequired},
form表单里的table使用组件,isRequiredNumber(v-if=“scope.row.isRequiredNumber == ‘0’”)是否必填标识(看自己业务需求,这个必填在此处判断因为业务需求是可配置是否必填的,只做必填可以去掉该判断,正常使用input-required)
.......
<el-col :span="21"><el-form-item label="资源" prop="resourcePrepare"><el-table :data="resourceResult" :header-cell-style="{ background: '#f0f2f5' }"><el-table-column align="center" prop="name" label="名称"></el-table-column><el-table-column align="center" prop="num" label="数量"><template slot-scope="scope"><el-input v-if="scope.row.isRequiredNumber == '0'" v-model="scope.row.num"placeholder="请输入内容"></el-input><input-required v-else :ref="`requiredNum${scope.$index}`":propValue="'num'" :labelValue="'数量'" :isDisalbed="false":indexValue="scope.$index" @updateData="updateData"></input-required></template></el-table-column><el-table-column label="" width="90"><template slot-scope="scope"><span @click="delResourcePrepare(scope.row)"class="el-icon-close txtClose"></span></template></el-table-column></el-table></el-form-item>
</el-col>
..........
提交表单做必填校验
submitForm() {this.$refs["form"].validate(valid => {let flag = true;//循环判断table里的所有数据for (let index = 0; index < this.resourceResult.length; index++) {//资源数量是否必填(业务需要正常使用可去掉判断)if (this.resourceResult[index].isRequiredNumber == '1') {flag = flag && this.$refs[`requiredNum` + index].isValid();}}if (!flag) {//必填校验未通过,结束方法return;}.....其他业务.....});
},
大概就是这样了。。。
相关文章:
【VUE】el-table表格内输入框或者其他控件规则校验实现
1、封装组件 1、规则校验一般基于form表单实现,因此需要给具体控件套一层form表单 新建组件input-required.vue,内容如下 <template><div><el-form ref"formRef" :model"form" :rules"formRules" label-…...
django开发中html继承模板样式
存在问题: django开发中,不同页面样式相同,如何共用一套母版,避免每个页面都重复写样式; 解决方案: 添加一个母版,如“layout.html”,在需要继承的位置添加{% block content %}{% e…...
MT6769/MTK6769核心板规格参数_联发科安卓主板开发板方案
MT6769安卓核心板具有集成的蓝牙、FM、WLAN和GPS模块,是一个高度集成的基带平台,结合了调制解调器和应用处理子系统,以支持LTE/LTE-A和C2K智能手机应用。 该芯片集成了两个工作频率高达2.0GHz的ARMCortex-A75内核、六个工作频率高达1.70GHz的…...
鸿蒙进阶篇-状态管理之@Provide与@Consume
大家好,这里是鸿蒙开天组,今天我们来学习一下状态管理中的Provide与Consume。 一、概述 嘿!大家还记得这张图吗?不记得也要记得哦,因为这张图里的东西,既是高频必考面试题,也是实际开发中&…...
java集合及源码
目录 一.集合框架概述 1.1集合和数组 数组 集合 1.2Java集合框架体系 常用 二. Collection中的常用方法 添加 判断 删除 其它 集合与数组的相互转换 三Iterator(迭代器)接口 3.0源码 3.1作用及格式 3.2原理 3.3注意 3.4获取迭代器(Iterator)对象 3.5. 实现…...
GraphRAG访问模式和知识图谱建模
GraphRAG访问模式和知识图谱建模 GraphRAG访问模式和知识图谱建模什么是GraphRAG了解文本分块检索模式图谱建模相关概念图结构 GraphRAG访问模式和知识图谱建模 graphrag.com是一个开源项目,收集了围绕GraphRAG的相关资源,目前正在快速收集大家的投稿。深…...
TCP/IP协议攻击与防范
一、TCP/IP协议攻击介绍 1.1 Internet的结构 LAN:局域网 WAN:广域网 WLAN:无线局域网 私有IP地址与公有IP地址? 私有地址:A类:10.0.0.0~10.255.255.255 B类:172.16.0.0~172.31.255.255…...
Java基于 SpringBoot+Vue的口腔管理平台(附源码+lw+部署)
博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
11.26深度学习_神经网络-数据处理
一、深度学习概述 1. 什么是深度学习 人工智能、机器学习和深度学习之间的关系: 机器学习是实现人工智能的一种途径,深度学习是机器学习的子集,区别如下: 传统机器学习算法依赖人工设计特征、提取特征,而深…...
【人工智能】Python常用库-TensorFlow常用方法教程
TensorFlow 是一个广泛应用的开源深度学习框架,支持多种机器学习任务,如深度学习、神经网络、强化学习等。以下是 TensorFlow 的详细教程,涵盖基础使用方法和示例代码。 1. 安装与导入 安装 TensorFlow: pip install tensorflow…...
微信小程序按字母顺序渲染城市 功能实现详细讲解
在微信小程序功能搭建中,按字母渲染城市会用到多个ES6的方法,如reduce,map,Object.entries(),Object.keys() ,需要组合熟练掌握,才能优雅的处理数据完成渲染。 目录 一、数据分析 二、数据处理 …...
23省赛区块链应用与维护(房屋租凭【下】)
23省赛区块链应用与维护(房屋租凭) 背景描述 随着异地务工人员的增多,房屋租赁成为一个广阔市场。目前,现有技术中的房屋租赁是由房主发布租赁信息,租赁信息发布在房屋中介或租赁软件,租客获取租赁信息后,现场看房,并签订纸质的房屋租赁合同,房屋租赁费用通过中介或…...
数据结构-图-领接表存储
一、了解图的领接表存储 1、定义与结构 定义:邻接表是图的一种链式存储结构,它通过链表将每个顶点与其相邻的顶点连接起来。 结构: 顶点表:通常使用一个数组来存储图的顶点信息,数组的每个元素对应一个顶点ÿ…...
快速入门web安全
一.确定初衷 1.我真的喜欢搞安全吗? 2.我只是想通过安全赚钱钱吗? 3.我不知道做什么就是随便。 4.一辈子做信息安全吗 这些不想清楚会对你以后的发展很不利,与其盲目的学习web安全,不如先做一个长远的计划。 否则在我看来都是浪费时间。如果你考虑好了…...
rabbitMq两种消费应答失败处理方式
在rabbitMq消费端,有三种应答模式: none:不处理。即消息投递给消费者后立刻 ack 消息会立刻从MQ删除。非常不安全,不建议使用 manual:手动模式。需要自己在业务代码中调用api,发送 ack 或 rejectÿ…...
Qt C++(一) 5.12安装+运行第一个项目
安装 1. Download Qt OSS: Get Qt Online Installer 在该链接中下载qt在线安装程序 2. 安装时候,注意关键一步,archive是存档的意思,可以找到旧的版本, 比如5.12 3. 注意组件没必要全选,否则需要安装50个g, 经过请教…...
【RISC-V CPU Debug 专栏 1 -- RISC-V debug 规范】
文章目录 RISC-V Debug调试用例支持的功能限制和不包括的内容RISC-V 调试架构的主要组件用户与调试主机调试翻译器调试传输硬件调试传输模块(DTM)调试模块(DM)调试功能触发模块版本介绍RISC-V Debug RISC-V 调试规范为 RISC-V 处理器提供了一套标准化的调试接口和功能,旨…...
使用Gradle编译前端的项目
使用Gradle编译前端的项目 前言项目结构根项目(parent-project)的 settings.gradle.kts后端项目(backend)的 build.gradle.kts前端项目(frontend)的 build.gradle.kts打包bootJar 前言 最近的项目都是使用…...
网络爬虫——常见问题与调试技巧
在开发网络爬虫的过程中,开发者常常会遇到各种问题,例如网页加载失败、数据提取错误、反爬机制限制等。以下内容将结合实际经验和技术方案,详细介绍解决常见错误的方法,以及如何高效调试和优化爬虫代码。 1. 爬虫过程中常见的错误…...
【AI绘画】Midjourney进阶:色调详解(下)
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 💯前言💯Midjourney中的色彩控制为什么要控制色彩?为什么要在Midjourney中控制色彩? 💯色调纯色调灰色调暗色调 💯…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
Spring是如何解决Bean的循环依赖:三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间互相持有对方引用,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...
