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

【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表单实现&#xff0c;因此需要给具体控件套一层form表单 新建组件input-required.vue&#xff0c;内容如下 <template><div><el-form ref"formRef" :model"form" :rules"formRules" label-…...

django开发中html继承模板样式

存在问题&#xff1a; django开发中&#xff0c;不同页面样式相同&#xff0c;如何共用一套母版&#xff0c;避免每个页面都重复写样式&#xff1b; 解决方案&#xff1a; 添加一个母版&#xff0c;如“layout.html”&#xff0c;在需要继承的位置添加{% block content %}{% e…...

MT6769/MTK6769核心板规格参数_联发科安卓主板开发板方案

MT6769安卓核心板具有集成的蓝牙、FM、WLAN和GPS模块&#xff0c;是一个高度集成的基带平台&#xff0c;结合了调制解调器和应用处理子系统&#xff0c;以支持LTE/LTE-A和C2K智能手机应用。 该芯片集成了两个工作频率高达2.0GHz的ARMCortex-A75内核、六个工作频率高达1.70GHz的…...

鸿蒙进阶篇-状态管理之@Provide与@Consume

大家好&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习一下状态管理中的Provide与Consume。 一、概述 嘿&#xff01;大家还记得这张图吗&#xff1f;不记得也要记得哦&#xff0c;因为这张图里的东西&#xff0c;既是高频必考面试题&#xff0c;也是实际开发中&…...

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是一个开源项目&#xff0c;收集了围绕GraphRAG的相关资源&#xff0c;目前正在快速收集大家的投稿。深…...

TCP/IP协议攻击与防范

一、TCP/IP协议攻击介绍 1.1 Internet的结构​ LAN&#xff1a;局域网 WAN&#xff1a;广域网 WLAN&#xff1a;无线局域网 私有IP地址与公有IP地址&#xff1f; 私有地址&#xff1a;A类&#xff1a;10.0.0.0~10.255.255.255 B类&#xff1a;172.16.0.0~172.31.255.255…...

Java基于 SpringBoot+Vue的口腔管理平台(附源码+lw+部署)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

11.26深度学习_神经网络-数据处理

一、深度学习概述 1. 什么是深度学习 ​ 人工智能、机器学习和深度学习之间的关系&#xff1a; ​ 机器学习是实现人工智能的一种途径&#xff0c;深度学习是机器学习的子集&#xff0c;区别如下&#xff1a; ​ 传统机器学习算法依赖人工设计特征、提取特征&#xff0c;而深…...

【人工智能】Python常用库-TensorFlow常用方法教程

TensorFlow 是一个广泛应用的开源深度学习框架&#xff0c;支持多种机器学习任务&#xff0c;如深度学习、神经网络、强化学习等。以下是 TensorFlow 的详细教程&#xff0c;涵盖基础使用方法和示例代码。 1. 安装与导入 安装 TensorFlow&#xff1a; pip install tensorflow…...

微信小程序按字母顺序渲染城市 功能实现详细讲解

在微信小程序功能搭建中&#xff0c;按字母渲染城市会用到多个ES6的方法&#xff0c;如reduce&#xff0c;map&#xff0c;Object.entries()&#xff0c;Object.keys() &#xff0c;需要组合熟练掌握&#xff0c;才能优雅的处理数据完成渲染。 目录 一、数据分析 二、数据处理 …...

23省赛区块链应用与维护(房屋租凭【下】)

23省赛区块链应用与维护(房屋租凭) 背景描述 随着异地务工人员的增多,房屋租赁成为一个广阔市场。目前,现有技术中的房屋租赁是由房主发布租赁信息,租赁信息发布在房屋中介或租赁软件,租客获取租赁信息后,现场看房,并签订纸质的房屋租赁合同,房屋租赁费用通过中介或…...

数据结构-图-领接表存储

一、了解图的领接表存储 1、定义与结构 定义&#xff1a;邻接表是图的一种链式存储结构&#xff0c;它通过链表将每个顶点与其相邻的顶点连接起来。 结构&#xff1a; 顶点表&#xff1a;通常使用一个数组来存储图的顶点信息&#xff0c;数组的每个元素对应一个顶点&#xff…...

快速入门web安全

一.确定初衷 1.我真的喜欢搞安全吗? 2.我只是想通过安全赚钱钱吗? 3.我不知道做什么就是随便。 4.一辈子做信息安全吗 这些不想清楚会对你以后的发展很不利&#xff0c;与其盲目的学习web安全&#xff0c;不如先做一个长远的计划。 否则在我看来都是浪费时间。如果你考虑好了…...

rabbitMq两种消费应答失败处理方式

在rabbitMq消费端&#xff0c;有三种应答模式&#xff1a; none&#xff1a;不处理。即消息投递给消费者后立刻 ack 消息会立刻从MQ删除。非常不安全&#xff0c;不建议使用 manual&#xff1a;手动模式。需要自己在业务代码中调用api&#xff0c;发送 ack 或 reject&#xff…...

Qt C++(一) 5.12安装+运行第一个项目

安装 1. Download Qt OSS: Get Qt Online Installer 在该链接中下载qt在线安装程序 2. 安装时候&#xff0c;注意关键一步&#xff0c;archive是存档的意思&#xff0c;可以找到旧的版本&#xff0c; 比如5.12 3. 注意组件没必要全选&#xff0c;否则需要安装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编译前端的项目 前言项目结构根项目&#xff08;parent-project&#xff09;的 settings.gradle.kts后端项目&#xff08;backend&#xff09;的 build.gradle.kts前端项目&#xff08;frontend&#xff09;的 build.gradle.kts打包bootJar 前言 最近的项目都是使用…...

网络爬虫——常见问题与调试技巧

在开发网络爬虫的过程中&#xff0c;开发者常常会遇到各种问题&#xff0c;例如网页加载失败、数据提取错误、反爬机制限制等。以下内容将结合实际经验和技术方案&#xff0c;详细介绍解决常见错误的方法&#xff0c;以及如何高效调试和优化爬虫代码。 1. 爬虫过程中常见的错误…...

【AI绘画】Midjourney进阶:色调详解(下)

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;Midjourney中的色彩控制为什么要控制色彩&#xff1f;为什么要在Midjourney中控制色彩&#xff1f; &#x1f4af;色调纯色调灰色调暗色调 &#x1f4af…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...