【VUE】el-table表格内输入框或者其他控件规则校验实现

ops/2024/11/29 3:44:19/

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>javascript">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;}.....其他业务.....});
},

大概就是这样了。。。


http://www.ppmy.cn/ops/137551.html

相关文章

Java常见的锁策略

目录 Java常见的锁策略悲观锁和乐观锁轻量级锁和重量级锁自旋锁和挂起等待锁普通互斥锁和读写锁公平锁和非公平锁可重入锁和不可重入锁Java中的synchronized算哪种情况&#xff1f;系统原生的锁算哪种情况&#xff1f;synchronized的加锁过程&#xff0c;尤其是“自适应”是咋回…

【软件入门】Git快速入门

Git快速入门 文章目录 Git快速入门0.前言1.安装和配置2.新建版本库2.1.本地创建2.2.云端下载 3.版本管理3.1.添加和提交文件3.2.回退版本3.2.1.soft模式3.2.2.mixed模式3.2.3.hard模式3.2.4.使用场景 3.3.查看版本差异3.4.忽略文件 4.云端配置4.1.Github4.1.1.SSH配置4.1.2.关联…

Leetcode - 周赛424

目录 一&#xff0c;3354. 使数组元素等于零 二&#xff0c; 3355. 零数组变换 I 三&#xff0c;3356. 零数组变换 II 四&#xff0c;3357. 最小化相邻元素的最大差值 一&#xff0c;3354. 使数组元素等于零 本题实际上是一个前/后缀和的问题&#xff0c;就是判断前缀和与后…

Tri Mode Ethernet MAC IP核详解

本文对 Vivado 的三速 MAC IP 核&#xff08;Tri Mode Ethernet MAC&#xff0c;TEMAC&#xff09;进行介绍。 在自行实现三速以太网 MAC 控制器时&#xff0c;GMII/RGMII 接口可以通过 IDDR、ODDR 原语实现&#xff0c;然而实际使用中自己实现的模块性能不是很稳定&#xff08…

单片机电路基本知识

单片机电路基本知识 MCU(C51) 概念&#xff1a;应用实例家用电子&#xff0c;汽车电子&#xff0c;嵌入式系统&#xff0c;低成本&#xff0c;低功耗&#xff0c;小型化&#xff0c;通常使用c语言或者汇编语言&#xff0c;用于家用电器控制&#xff0c;智能家居&#xff0c;汽…

使用flink编写WordCount

1. env-准备环境 2. source-加载数据 3. transformation-数据处理转换 4. sink-数据输出 5. execute-执行 流程图&#xff1a; DataStream API开发 //nightlies.apache.org/flink/flink-docs-release-1.13/docs/dev/datastream/overview/ 添加依赖 <properties>&l…

C语言超详细教程

系列文章目录 文章目录 系列文章目录1 运算符1.1 算术运算符:2 控制语句2.1 条件语句:2.2 循环语句:3 函数3.1 函数的定义与声明:3.2 递归函数:4 指针4.1 指针的定义与使用函数指针:5. 数组与字符串5.1 数组一维数组:相同类型元素的集合(如:多维数组:数组的数组(如:…

【多线程-第一天-多线程的技术方案-pthread演示 Objective-C语言】

一、多线程的技术方案 1.我们来看一下多线程的技术方案 技术方案 pthread:一套通用的多线程API、适用于Unix\Linux Windows等系统、跨平台、可移植、使用难度大、C语言、线程的生命周期由程序员管理、使用频率:几乎不用 NSThread:使用更加面向对象、简单易用、可直接操作…