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

server/2024/11/28 8:28:00/

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/server/145573.html

相关文章

如何打印Android.mk里面的变量

在 Android.mk 文件中&#xff0c;你可以使用一些技巧来打印变量的值&#xff0c;以便在调试构建脚本时查看变量的内容。虽然 Android.mk 文件本身不直接支持打印变量的功能&#xff0c;但可以通过一些间接的方法实现这一点。 方法一&#xff1a;使用 $(warning) $(warning) …

实战OpenCV之物体跟踪

基础入门 物体跟踪技术是一种计算机视觉领域的重要技术&#xff0c;用于连续地检测和定位视频序列中的一个或多个目标物体。物体跟踪技术在众多领域都有广泛的应用&#xff0c;比如&#xff1a;自动驾驶、安防监控、增强现实等。物体跟踪的基本流程包含以下几个主要步骤。 1、初…

深度学习:GPT-2的MindSpore实践

GPT-2简介 GPT-2是一个由OpenAI于2019年提出的自回归语言模型。与GPT-1相比&#xff0c;仍基于Transformer Decoder架构&#xff0c;但是做出了一定改进。 模型规格上&#xff1a; GPT-1有117M参数&#xff0c;为下游微调任务提供预训练模型。 GPT-2显著增加了模型规模&…

UE5 Spawm Emitter at Location(在位置处生成发射器)

在 Unreal Engine 5 (UE5) 中&#xff0c;Spawn Emitter at Location 是一个非常有用的节点&#xff0c;用来在特定位置生成粒子效果&#xff08;Particle Emitter&#xff09;。这个节点常用于在蓝图中创建临时的粒子效果&#xff0c;例如爆炸、火花或其他动态效果。 如何使用…

大语言模型LLM的微调中 QA 转换的小工具 txt2excel.py

在训练语言模型中&#xff0c;需要将文件整理成规范的文档&#xff0c;因为文档本身会有很多不规范的地方&#xff0c;为了训练的正确&#xff0c;将文档进行规范处理 文章最后附上txt的sample 该 Python 代码的主要目的是将特定格式的文本文件中的问答数据读取出来&#xff…

蓝桥杯不知道叫什么题目

小蓝有一个整数&#xff0c;初始值为1&#xff0c;他可以花费一些代价对这个整数进行变换。 小蓝可以花贵1的代价将教数增加1。 小蓝可以花费3的代价将整数增加一个值,这个值是整数的数位中最大的那个(1到9) .小蓝可以花费10的代价将整数变为原来的2倍, 例如&#xff0c;如果整…

8K超高清相机+双光谱融合技术

8K超高清相机 双光谱融合技术

如何通过PHP爬虫模拟表单提交,抓取隐藏数据

引言 在网络爬虫技术中&#xff0c;模拟表单提交是一项常见的任务&#xff0c;特别是对于需要动态请求才能获取的隐藏数据。在电商双十一、双十二等促销活动期间&#xff0c;商品信息的实时获取尤为重要&#xff0c;特别是针对不断变化的价格和库存动态。为了满足这种需求&…