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

Vue3+ElementUI中的Table组件的使用

Vue3+ElementUI中的Table组件的使用

    • 校验
      • 表格内多个输入框校验
    • 表格滚动到底部

校验

表格内多个输入框校验

  1. 注意prop如何写。
  2. 实现:一旦输入框内部有更改,清空校验;
  3. 实现:自定义校验错误提示信息样式;
  4. 实现:在校验中获取该行数据;
<template><el-table :data="inputTableData" max-height="286"><el-table-column type="index" label="#" align="center" width="80" /><el-table-column prop="name" label="产品名称" align="center" width="180"><template #default="scope"><el-form-item :prop="`${scope.$index}.name`" :rules="inputTableRules(scope.row).name"><el-input type="text" v-model="scope.row.name" @input="clearValidateStatus(scope.$index, 0)"></el-input><template v-slot:error="{ error }"><el-tooltip effect="light" :content="error" placement="top"><el-icon class="custom-error-tip"><WarningFilled /></el-icon></el-tooltip></template></el-form-item></template></el-table-column><el-table-column prop="price" label="price" align="center"><template #default="scope"><el-form-item :prop="`${scope.$index}.price`" :rules="inputTableRules(scope.row).price"><el-input type="text" v-model="scope.row.L" @input="clearValidateStatus(scope.$index, 1)"></el-input><template v-slot:error="{ error }"><el-tooltip effect="light" :content="error" placement="top"><el-icon class="custom-error-tip"><WarningFilled /></el-icon></el-tooltip></template></el-form-item></template></el-table-column></el-table>
</template><script lang="ts" setup>
const inputTableRules = (row) => {return {name: [{ validator: validateInputTableName, rowData: row, trigger: [] }],L: [{ validator: validateNumber, rowData: row, trigger: [] }],A: [{ validator: validateNumber, rowData: row, trigger: [] }],B: [{ validator: validateNumber, rowData: row, trigger: [] }]}
}const clearValidateStatus = (rowIndex, columnIndex) => {let columnLength = 4;let itemIndex = rowIndex * columnLength + columnIndexinputTableRuleFormRef.value.fields[itemIndex].clearValidate();
}
</script>

表格滚动到底部

// 表格滚动到底部
export const tableScrollToBottom = (tableRef) => {if (tableRef) {let maxHeight = tableRef.layout.table.refs.bodyWrapper.firstElementChild.firstElementChild.firstElementChild.clientHeight;tableRef.setScrollTop(maxHeight);}
}

相关文章:

Vue3+ElementUI中的Table组件的使用

Vue3ElementUI中的Table组件的使用 校验表格内多个输入框校验 表格滚动到底部 校验 表格内多个输入框校验 注意prop如何写。实现&#xff1a;一旦输入框内部有更改&#xff0c;清空校验&#xff1b;实现&#xff1a;自定义校验错误提示信息样式&#xff1b;实现&#xff1a;在…...

Highcharts 条形图:数据可视化的利器

Highcharts 条形图:数据可视化的利器 引言 在数据分析和可视化领域,Highcharts 是一个广受欢迎的 JavaScript 图表库。它以其易用性、灵活性和丰富的图表类型而著称。其中,条形图作为一种基础但功能强大的图表类型,被广泛应用于各种场景,以直观地展示数据分布和比较。本…...

嵌入式初学-C语言-二四

Void与void*的区别 定义&#xff1a; Void&#xff1a;空类型&#xff0c;是数据类型的一种 Void*&#xff1a;是指针类型&#xff0c;是指针类型的一种&#xff0c;可以匹配任何类型的指针&#xff0c;类似于通配符 Void 说明&#xff1a;void作为返回值类型使用&#xf…...

tcpdump入门——每种flag分别表示什么意思

在 tcpdump 的输出中&#xff0c;TCP 标志位&#xff08;Flags&#xff09;通常用简写字符表示。以下是每种 TCP 标志位的含义及其对应的简写字符&#xff1a; TCP 标志位及其简写 SYN (Synchronize) 作用&#xff1a;用于初始化连接。简写字符&#xff1a;S ACK (Acknowledgm…...

Qt如何封装工具

在Qt中封装工具类或库是一种常见的开发模式&#xff0c;通过封装可以提高代码的可重用性、可维护性和模块化。以下是封装工具类的一些步骤和最佳实践&#xff1a; ### 1. 创建工具类 首先&#xff0c;创建一个新的C类作为你的工具类。在Qt Creator中&#xff0c;可以通过右键点…...

vue3进阶用法之通过调用函数动态加载组件用法及示例

业务场景 假设现在有一个可能在全局任何地方调用的vue组件你会怎么办&#xff1f;非常简单&#xff0c;在app.vue下的router-view同级写上这个组件&#xff0c;在全局中加一个变量v-if判断这个变量就解决了&#xff01; tempalte中 <div><router-view /><You…...

线程和进程的关系

计算机是如何运行的&#xff1f;CPU 操作系统 进程管理 CPU 多核心 充分利用-> 并发编程&#xff0c;并发执行就算分时复用&#xff0c; 包括多进程编程。 多进程编程进程太重&#xff0c;创建进程&#xff0c;销毁进程开销比较大 &#xff0c;不利于频繁创建销毁进程&…...

《AI视频类工具之十二——​ EbSynth》

一.简介 官网:https://ebsynth.com/?ref=ai-bot.cn EbSynth是一款功能强大的视频风格转换工具,它利用先进的图像处理和计算机视觉技术,将静态艺术风格应用到视频中的每一帧,为视频创作者提供了全新的创作方式。 二.功能介绍 主要功能 视频转换:EbSynth 可以将视频转换…...

Facebook国内企业户、海外户、国内二不限户以及三不限户区别何在?

Facebook广告账户的类型和设置对于企业在不同市场中的广告活动至关重要。了解国内企业户、海外企业户&#xff0c;以及国内二不限户和三不限户的区别&#xff0c;可以帮助你更好地选择和管理广告账户。以下是对这些账户类型的详细解析。 一、Facebook海外企业广告账户 海外企业…...

修改 ASP.NET Core 应用程序运行后的默认端口

可以通过以下几种方法来实现。具体选择哪种方法取决于项目需求和环境设置。 方法 1&#xff1a;使用 appsettings.json 配置文件 你可以在 appsettings.json 中设置 Kestrel 的配置来更改默认端口。 打开 appsettings.json 文件&#xff0c;添加 Kestrel 配置&#xff1a; { …...

维基知识库系统Wiki.js本地Linux环境部署并配置公网地址远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

010集——按值传递、按引用传递等方法——C#学习笔记

按值传递参数 这是参数传递的默认方式。在这种方式下&#xff0c;当调用一个方法时&#xff0c;会为每个值参数创建一个新的存储位置。 实际参数的值会复制给形参&#xff0c;实参和形参使用的是两个不同内存中的值。所以&#xff0c;当形参的值发生改变时&#xff0c;不会影…...

Linux系统调优技巧

Linux系统调优技巧 Linux 性能调优技巧的深度分析及场景案例目录 1. Linux 性能调优的基础概念1.1 性能调优的目标1.2 常见的性能瓶颈 2. 系统监控与性能分析工具2.1 常用工具介绍2.2 实战案例&#xff1a;如何通过工具定位性能问题 3. CPU 性能调优3.1 CPU 负载分析3.2 CPU 调…...

计算机学习

不要只盯着计算机语言学习&#xff0c;你现在已经学习了C语言和Java&#xff0c;暑假又规划学习Python&#xff0c;最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言&#xff0c;沿着这个方向继续往后学习知识就行。计算机语言是学不完的&#xff0c;而未来就…...

数字医学影像系统PACS源码,三甲以下医院都能满足,C#语言开发,C/S架构系统成熟稳定,支持二次开发项目使用。

数字医学影像系统&#xff08;RIS/PACS&#xff09;源码&#xff0c;三甲以下的医院都能满足。开发技术&#xff1a;C/S架构&#xff0c;C#开发语言&#xff0c;数据库服务器采用Oracle数据库。 PACS系统模块组成 &#xff1a; 工作站&#xff1a; 分诊工作站、超声工作站、放…...

C++语言基础|循环结构

C语言基础|循环结构 循环1. for语句2. while循环3. do…while语句 循环 在程序中&#xff0c;常常需要重复地执行某些操作。C提供了3种循环语句&#xff1a;for语句、while语句和do-while语句。在循环语句中&#xff0c;重复执行的操作叫做循环体。循环体可以是单条语句、块语…...

【学习笔记】解决在声音输出中找不到蓝牙耳机设备的问题

【学习笔记】在声音输出中找不到蓝牙耳机设备 在使用蓝牙耳机的时候&#xff0c;遇见一个问题&#xff0c;就是在电脑在连接蓝牙耳机之后&#xff0c;在声音输出中找不到蓝牙耳机设备&#xff0c;只能使用扬声器播放声音。电脑使用的是Windows 11系统。后来在网上寻找解决方案…...

PPPoE基础笔记

一、拨号原理 1.Discovery&#xff08;发现阶段&#xff09; PADI Client 发送广播的PADI报文&#xff0c;报文中包含Client想要的服务信息。 PADO Server收到PADI后&#xff0c;会向Client回复一个单播的PADO报文。 PADR Client 收到最先收到的PADO…...

开发组日志记录SPEC_v0.1.0

文章目录 开发组日志记录SPEC_v0.1.0目的设计逻辑1. User日志记录器1.1 记录器标签内容介绍1.2 程序打印User日志规则 2. Dev日志记录器2.1 记录器标签内容介绍2.2 程序打印Dev日志规则 3.代码说明3.1 代码详情3.2 使用说明 更新记录 时间版本内容修订者备注2024/08/150.1.0创…...

MySQL8 innoDB引擎的精髓

[client] port 3306 socket /var/lib/mysql/mysql.sock [mysql] #prompt"\umysqldb \R:\m:\s [\d]> " #关闭自动补全sql命令功能 no-auto-rehash ########################################################################### ##服务端参数配置 ######…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...