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,一经查实,立即删除!

相关文章

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

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 应用。授权…

点亿点计划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;那…

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

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

【大模型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…

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

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

如何在 Microsoft Edge 上使用开发人员工具

Microsoft Edge 提供了一套强大的开发人员工具&#xff0c;可帮助 Web 开发人员检查、调试和优化他们的网站或 Web 应用程序。 无论您是经验丰富的 Web 开发人员还是刚刚起步&#xff0c;了解如何有效地使用这些工具都可以对开发过程产生重大影响。 在本文中&#xff0c;我们…

Java版Flink使用指南——分流导出

大纲 新建工程编码Pom.xml自定义无界流分流 测试工程代码 在之前的案例中&#xff0c;我们一直使用的是单个Sink来做数据的输出。实际上&#xff0c;Flink是支持多个输出流的。本文我们就来讲解如何在Flink数据输出时做分流处理。 我们将基于《Java版Flink使用指南——自定义无…

【目标检测】使用自己的数据集训练并预测yolov8模型

1、下载yolov8的官方代码 地址&#xff1a; GitHub - ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > OpenVINO > CoreML > TFLite 2、下载目标检测的训练权重 yolov8n.pt 将 yolov8n.pt 放在ultralytics文件夹下 3、数据集分布 注…

国际网课平台Udemy上的亚马逊云科技AWS免费高分课程和创建、维护EC2动手实践

亚马逊云科技(AWS)是全球云行业最&#x1f525;火的云平台&#xff0c;在全球经济形势不好的大背景下&#xff0c;通过网课学习亚马逊云科技AWS基础备考亚马逊云科技AWS证书&#xff0c;对于找工作或者无背景转行做AWS帮助巨大。欢迎大家关注小李哥&#xff0c;及时了解世界最前…

文件操作和IO流(Java版)

前言 我们无时无刻不在操作文件。可以说&#xff0c;我们在电脑上能看到的图片、视频、音频、文档都是一个又一个的文件&#xff0c;我们需要从文件中读取我们需要的数据&#xff0c;将数据运算后也需要将结果写入文件中长期保存。可见文件的重要性&#xff0c;今天我们就来简…

分布式锁(仅供自己参考)

分布式锁&#xff1a;满足分布式系统或集群式下多进程可见并且互斥的锁&#xff08;使用外部的锁&#xff0c;因为如果是集群部署&#xff0c;每台服务器都有一个对应的tomcat&#xff0c;则每个tomcat的jvm就不同&#xff0c;锁对象就不同&#xff08;加锁的机制&#xff0c;每…

独立开发者系列(23)——Linux掌握小结

只要开发系统&#xff0c;就绕不开使用Linux服务器 &#xff0c;而Linux除了使用BT面板进行初级管理&#xff0c;很多稍微高级点的管理&#xff0c;还是需要命令行进行的。这里总结在不需要精通的情况下&#xff0c;掌握常见命令和环境的相关配置。 &#xff08;1&#xff09…