vue3 + element-plus 表格行内编辑,如何实现表单校验?

问题描述: 当使用table实现行内编辑时,往往需要对必填项增加校验以及错误高度, 预期实现效果如下:

 

实现思路:

使用el-form表单自身的校验功能:通过el-from绑定对应表格行的prop, 实现校验

页面模版结构如下:

<el-form ref="formRef" :model="tableData" :label-width="0" :rules="rules"><el-table :data="tableData" style="width: 100%"><el-table-column prop="type" label="类型" width="180"><template #default="{ row, index }"><el-form-item v-if="index > -1" :prop="`${index}.type`" :rules="rules.type"><el-select-v2 v-model="row.type" :options="changeEnumToOptions(IOuterType)" placeholder="请选择类型" /></el-form-item></template></el-table-column><el-table-column prop="name" label="名称" width="180"><template #default="{ row, index }"><el-form-item v-if="index > -1" :prop="`${index}.type`" :rules="rules.name"><el-input v-model="row.name" placeholder="请输入名称" /></el-form-item></template></el-table-column></el-table>
</el-form>

注意的点:

  • el-form(model属性)绑定的值,必须和el-table(data属性)的值一致。
  • el-from-item 的prop绑定值的路径,必须正确:`${index}.columnName`, index: 对应表格的行标,columnName为当前表格列对应的prop值。
  • rules: 绑定位置必须绑定到el-form-item上, 绑定到el-form上不生效。

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

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

相关文章

@SpringBootApplication 注解

什么是 SpringBootApplication SpringBootApplication 是 Spring Boot 提供的一个核心注解&#xff0c;它是一个组合注解&#xff0c;用于简化 Spring Boot 应用程序的配置。这个注解通常标注在主类上&#xff0c;用于标识一个 Spring Boot 应用的入口。通过这个注解&#xff…

【力扣】每日一题—第70题,爬楼梯

题目&#xff1a; 假设你正在爬楼梯。需要n阶你才能到达楼顶。 每次你可以爬1或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 思路&#xff1a; 我开始是写了一个函数计算爬一层和爬二层的个数&#xff0c;之后排列求和&#xff0c;但是超范围了&#xff0c…

数据结构基础--------【二叉树题型】

1、前提(待补充) 1.**DFS&#xff08;Depth First Search&#xff09;&#x1f617;*递归法得到最终的数组&#xff08;深度优先算法&#xff09; 其过程简要来说是对每一个可能的分支路径深入到不能再深入为止&#xff0c;如果遇到死路就往回退&#xff0c;回退过程中如果遇…

OAuth2.0登录的四种方式

OAuth登录的四种方式 1. 授权码 授权码&#xff08;authorization code&#xff09;方式&#xff0c;指的是第三方应用先申请一个授权码&#xff0c;然后再用该码获取令牌。 这种方式是最常用的流程&#xff0c;安全性也最高&#xff0c;它适用于那些有后端的 Web 应用。授权…

怎么通过住宅代理IP实现电商采集?

在电商行业&#xff0c;数据采集是一种常见的策略&#xff0c;用于分析市场趋势、监测竞争对手价格和库存、优化产品策略等。由于许多电商平台有严格的数据采集政策和反爬虫措施&#xff0c;使用住宅代理IP可以有效绕过这些限制&#xff0c;实现高效和安全的数据采集。本文将探…

点亿点计划Web3.0广告平台即将发射Clicks科力币

点亿点计划Web3.0广告平台即将发射Clicks科力币 我们很高兴地宣布&#xff0c;点亿点计划Web3.0广告平台即将发射Clicks科力币&#xff01;科力币&#xff08;Clicks&#xff09;是Clicks X Web3.0多功能应用的治理代币&#xff0c;未来将为代币持有人带来巨大的广告收入。 …

计算机的错误计算(二十六)

摘要 结合计算机的错误计算&#xff08;二十四&#xff09;中的 Maple 环境下的计算过程&#xff0c;&#xff08;二十五&#xff09;讨论了&#xff08;不&#xff09;停机问题。事实上&#xff0c;其它数学软件比如 Mathematica 也存在该问题。 &#xff08;不&#xff09;停…

《植物大战僵尸杂交版》2.2版本:全新内容与下载指南

《植物大战僵尸杂交版》2.2版本已经火热更新&#xff0c;带来了一系列令人兴奋的新玩法和调整&#xff0c;为这款经典的塔防游戏注入了新的活力。如果你是《植物大战僵尸》系列的忠实粉丝&#xff0c;那么这个版本绝对值得你一探究竟。 2.2版本更新亮点 新增看星星玩法 这个新…

Linux学习——Linux中无法使用ifconfg命令

Linux学习——Linux中无法使用ifconfg命令&#xff1f; &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅…

【Python基础篇】条件判断和循环判断

文章目录 1. 条件判断1.1 单分支1.2 双分支1.3 多分支 2. 循环判断2.1 while2.2 for2.3 break2.4 continue 1. 条件判断 1.1 单分支 前面学习了打印&#xff0c;但是有时候我们在打印时会面临选择&#xff0c;例如&#xff1a;一个网吧&#xff0c;未满18&#xff0c;禁止进入…

力扣喜刷刷--day1

1.无重复字符的最长子串 知识点&#xff1a;滑动窗口 基本概念 窗口&#xff1a;窗口是一个连续的子序列&#xff0c;可以是固定长度或可变长度。滑动&#xff1a;窗口在数据序列上移动&#xff0c;可以是向左或向右。边界&#xff1a;窗口的起始和结束位置。 应用场景 字符…

OpenAI与Thrive Global推出Thrive AI Health:AI驱动的健康教练应用

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

JAVA之开发神器——IntelliJ IDEA的下载与安装

一、IDEA是什么&#xff1f; IEAD是JetBrains公司开发的专用于java开发的一款集成开发环境。由于其功能强大且符合人体工程学&#xff08;就是更懂你&#xff09;的优点&#xff0c;深受java开发人员的喜爱。目前在java开发工具中占比3/4。如果你要走java开发方向&#xff0c;那…

深入解析C#中的Stopwatch类:精准计时的艺术

目录 引言 了解Stopwatch类 创建与使用Stopwatch 使用多个Stopwatch实例 性能分析与优化 结论 后记 引言 在软件开发中&#xff0c;性能分析是不可或缺的一环&#xff0c;它帮助我们识别瓶颈、优化代码&#xff0c;确保应用程序的高效运行。C#中的Stopwatch类便是开发者…

python+pygame实现五子棋人机对战之一

五子棋起源于中国&#xff0c;是全国智力运动会竞技项目之一&#xff0c;是一种两人对弈的纯策略型棋类游戏。双方分别使用黑白两色的棋子&#xff0c;下在棋盘直线与横线的交叉点上&#xff0c;先形成五子连珠者获胜。 本内容仅仅涉及到人机对战版&#xff0c;人人对战版后续…

LlamaInde相关学习

LlamaIndex 详解 什么是 LlamaIndex&#xff1f; LlamaIndex 是一种工具&#xff0c;旨在通过向量化和索引技术增强大语言模型&#xff08;LLM&#xff09;与文档数据交互的效率和准确性。它特别适合在需要高效文档检索和信息查询的场景中使用。 主要特点 向量索引&#xf…

【大模型LLM面试合集】大语言模型架构_MoE论文

1.MoE论文 参考文章&#xff1a; Mixture of Experts-IntroductionUnderstanding the Mixture-of-Experts Model in Deep Learning 论文相关&#xff1a; 论文名称&#xff1a;Outrageously Large Neural Networks: The Sparsely-Gated Mixture-of-Experts Layer论文地址&a…

常见加密算法介绍

一、介绍 数据加密是项目中非常常见的业务需求&#xff0c;封装好的三方组件也非常多&#xff0c;自己在工作时也经常会使用到&#xff0c;这次对主流常用的几种加密方式做一个梳理&#xff0c;会分别介绍其使用场景&#xff0c;以及如何使用。 二、对称加密 加密或者解密都需要…

秋招突击——7/9——复习{Java实现——LRU,Java实现——搜索插入位置}——新作{二分查找——搜索二维矩阵}

文章目录 引言复习Java实现——LRU缓存对照实现 Java实现——搜索插入位置java实现知识补充 新作搜索二维矩阵个人实现参考实现 总结 引言 以后都要向使用Java刷算法进行过滤了&#xff0c;所以今天主要是复习为主&#xff0c;复习两道之前做过的题目&#xff0c;然后做两道新…

华为机试真题--字符串序列判定

题目描述&#xff1a; 输入两个字符串S和L&#xff0c;都只包含英文小写字母&#xff0c;其中S长度<100&#xff0c;L长度<500000&#xff0c;请判定S是否是L的有效字串。 判定规则&#xff1a; S中的每个字符在L中都能找到&#xff08;可以不连续&#xff09;&#x…