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

vue3项目el-table表格行内编辑加输入框校验

核心点

1. el-form的model属性需要跟el-form-item的prop要对应

2. el-form的model属性绑定tableData

3. el-form-item的prop绑定字符串:scope.index+.列名(注意有个点)

4. el-form-item需要单独设置rules属性

代码示例

<el-form :model="tableData" :rules="tbRules"><el-table :data="tableData"><el-table-column><template #default="scope"><el-form-item label="名称" :prop="scope.$index + '.name'" :rules="tbRules.name"><!-- 封装一个输入框组件InputCell,根据当前行是否开启编辑状态(这个变量可以存在scope.row里)分别显示输入框或者展示数据 待完善 -->            <InputCell :rowData="scope.row" :column="scope.column"></InputCell></el-form-item></template></el-table-column></el-table></el-form>
const tableData = ref([{name: 'test'}]);
const tbRules = {name: [{ required: true, message: '输入不能为空', trigger: 'blur' }]
}

遇到的问题

说明下因为我二次封装了el-table,数据和列都是传进去的,组件里通过循环输出列,所以可能才会出现这个问题吧。

提交时输入框失焦校验都通过,但是表单整体校验没过 ,给校验方法打断点执行发现 ,遇到scope.$index为-1的时候也在表单中产生了列,但这行数据实际不存在,所以校验没通过。

暂时规避办法:scope.$index等于-1时不渲染el-table-column,加个v-if判断。

相关文章:

vue3项目el-table表格行内编辑加输入框校验

核心点 1. el-form的model属性需要跟el-form-item的prop要对应 2. el-form的model属性绑定tableData 3. el-form-item的prop绑定字符串&#xff1a;scope.index.列名&#xff08;注意有个点&#xff09; 4. el-form-item需要单独设置rules属性 代码示例 <el-form :mod…...

【Node.js】内置模块FileSystem的保姆级入门讲解

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;Vscode 本文代码都经由博主PleaSure乐事实操后得出&#xff0c;可以放心使用。 1.FileSystem介绍 Node.js 的 fs&#xff08;filesystem&#xff09;模块是一个核心模块&#xff0c…...

问:LINUXWINDOWS线程CPU时间如何排序?

Linux 在Linux上&#xff0c;你可以使用ps命令结合sort命令来查看和排序进程或线程的CPU使用时间。 查看进程的CPU使用时间并按时间排序 使用ps命令的-o选项可以自定义输出格式&#xff0c;-e选项表示显示所有进程&#xff0c;--sort选项用于排序。 ps -e -o pid,tid,comm,…...

postgresql-重复执行相同语句,试试 prepare!

文章目录 每次你向 PostgreSQL 发送 SQL 语句时&#xff0c;数据库都必须对其进行解析(parse)。解析虽然很快&#xff0c;但如果同样的语句被解析一千次&#xff0c;这种操作累积起来可能会占用大量时间&#xff0c;而这些时间本可以用于处理其他事务。为避免这种情况&#xff…...

wpf加载带材料的3D模型(下载的3D预览一样有纹理)

背景&#xff1a;最近真的是忙啊&#xff0c;累出汁水了 整体效果&#xff1a; 放大可以看清砖头&#xff1a; 1、需要自己准备好3D模型&#xff0c;比如我这里是下载的这里的3D Warehouse&#xff0c;下载Collada File格式文件 2、解压可以看到一个model.dae和材料的文件夹&…...

【k8s之深入理解调度】调度框架扩展点理解

参考自 K8s 调度框架设计与 scheduler plugins 开发部署示例&#xff08;2024&#xff09; 调度插件扩展点 等待调度阶段PreEnqueuePod 处于 ready for scheduling 的阶段。 内部工作原理&#xff1a;sig-scheduling/scheduler_queues.md。在 Pod 被放入调度队列之前执行的插…...

音视频基础理论

1. 音频基础 1.1 音频基本概念 1.1 频率&#xff1a;声波的频率&#xff0c;即声音的音调&#xff0c;人类听觉的频率(音调)范围为20Hz--20KHz 1.2 振幅&#xff1a;即声波的响度&#xff0c;通俗的讲就是声音的高低&#xff0c;一般男生的声音振幅(响度)大于女生。 1.3 波形…...

《江苏科技大学学报(自然科学版)》

《江苏科技大学学报&#xff08;自然科学版&#xff09;》&#xff08;双月刊&#xff0c;国内外公开发行&#xff09;是由江苏省教育厅主管、江苏科技大学主办的理工类学术期刊&#xff0c;1986年创刊&#xff0c;国际刊号&#xff1a;ISSN1673-4807&#xff0c;国内刊号&…...

C++初学者指南-5.标准库(第二部分)–随机数生成

C初学者指南-5.标准库(第二部分)–随机数生成 文章目录 C初学者指南-5.标准库(第二部分)–随机数生成基本概念例子统一随机数布尔值&#xff08;“抛硬币”&#xff09;正态分布具有独立概率的整数 怎么做种子引擎使用自定义生成器 shuffle算法分布类型概述通用接口均匀分布采样…...

Unity2017在安卓下获取GPS位置时闪退的解决办法

在Unity使用低功耗蓝牙通信&#xff08;BLE&#xff09;需要用到设备的位置信息。但是调用Input.location.Start()程序会闪退。 解决办法&#xff1a;调用原生安卓接口。 参见《Unity2021通过aar调用Android方法》编写一个aar插件gpsplugin&#xff0c;在插件中提供获取GPS位…...

OpenGL ES 索引缓冲区(4)

OpenGL ES 索引缓冲区(4) 简述 本节会介绍索引缓冲区&#xff0c;索引缓冲区和顶点缓冲区类似&#xff0c;也是显存上的一段内存&#xff0c;只不过上面的数据用处不同&#xff0c;索引缓冲区故名思义里面的数据是用于索引&#xff0c;主要作用是用于复用顶点缓冲区里的数据。…...

01:(寄存器开发)点亮一个LED灯

寄存器开发 1、单片机的简介1.1、什么是单片机1.2、F1系列内核和芯片的系统架构1.3、存储器映像1.4、什么是寄存器 2、寄存器开发模板工程3、使用寄存器点亮一个LED4、代码改进15、代码改进2 本教程使用的是STM32F103C8T6最小系统板&#xff0c;教程来源B站up“嵌入式那些事”。…...

.Net 6.0 Windows平台如何判断当前电脑是否联网

最近在工作中开发需要判断当前电脑是否联网的需求&#xff0c;在网上找了一个调用window API来判断本机是否联网。具体请看下面介绍&#xff1a; 1.方法一&#xff08;调用winAPI&#xff09; [DllImport("wininet")] public static extern bool InternetGetConnec…...

微软准备了 Windows 11 24H2 ISO “OOBE/BypassNRO“命令依然可用

Windows 11 24H2 可能在未来几周内开始推出。 微软已经要求 OEM 遵循新的指南准备好 Windows 11 24H2 就绪的驱动程序&#xff0c;并且现在已经开始准备媒体文件 (.ISO)。 OEM ISO 的链接已在微软服务器上发布。 一个标有"X23-81971_26100.1742.240906-0331.ge_release_sv…...

MacOS 终端执行安装 Brew

在配置新的 Mac 环境时&#xff0c;如果你发现终端中无法识别 brew 命令&#xff0c;可以按照以下步骤进行解决。 步骤 1&#xff1a;确保网络稳定 为了避免安装过程中出现中断&#xff0c;建议使用 Wi-Fi 或有线连接&#xff0c;不推荐使用移动网络。 步骤 2&#xff1a;打…...

【设计模式-解释模式】

定义 解释器模式是一种行为设计模式&#xff0c;用于定义一种语言的文法&#xff0c;并提供一个解释器来处理该语言的句子。它通过为每个语法规则定义一个类&#xff0c;使得可以将复杂的表达式逐步解析和求值。这种模式适用于需要解析和执行语法规则的场景。 UML图 组成角色…...

51单片机应用开发(进阶)---数码管+按键+蜂鸣器(电磁炉显示模拟)

实现目标 1、加强数码管、按键的学习&#xff0c;实现数码显示变量数据&#xff08;四位数的显示&#xff09;&#xff1b; 2、4位数码2个按键无源蜂鸣器实现模拟电磁炉功率调节及显示&#xff1b; 一、内容描述 功能描述&#xff1a;1、开机显示电磁炉功率300&#xff0c;每…...

Emergency Stop (ES)

文章目录 1. 介绍2. Feature List3. 紧急停止信号触发方式3.1 Port触发紧急停止信号3.2 SMU事件触发紧急停止信号3.3 软件触发紧急停止信号 4. 应用场景4.1 Port4.2 MSC 1. 介绍 Emergency Stop (ES)是Ifx System Control Units (SCU)六大模块之一。详细信息可以参考Infineon-…...

[C++][第三方库][gtest]详细讲解

目录 1.介绍2.安装3.使用1.头文件包含2.框架初始化接口3.调用测试样例4.TEST宏5.断言宏6.示例 1.介绍 gtest是一个跨平台的C单元测试框架&#xff0c;由Google公司发布gtest是为了在不同平台上为编写C单元测试而生成的&#xff0c;它提供了丰富的断言、致命和非致命判断、参数…...

【Java数据结构】 链表

【本节目标】 1. ArrayList 的缺陷 2. 链表 3. 链表相关 oj题目 一. ArrayList的缺陷 上节课已经熟悉了ArrayList 的使用&#xff0c;并且进行了简单模拟实现。通过源码知道&#xff0c; ArrayList 底层使用数组来存储元素&#xff1a; public class ArrayList<E>…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...