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

Vue3(elementPlus) el-table替换/隐藏行箭头，点击整行展开

news 来源：原创 2025/5/15 5:22:36

element文档链接：

https://element-plus.org/zh-CN/component/form.html

一、el-table表格行展开关闭箭头替换成加减号

注：Vue3在样式中修改箭头图标无效，可能我设置不对，欢迎各位来交流指导

转变思路：隐藏箭头，添加一行显示展开关闭所需图标

1、隐藏箭头

.el-table__expand-icon .el-icon svg {display: none;
}

此时只是箭头不可见，但是箭头的占位还在，显得很空

2、去掉箭头空白，添加替换箭头的图标列

在显示展开内容的列标签中设置width="1"

<el-table-column type="expand" width="1" ><template #default="props"><div class="tableItem" :style="{ width: 'calc(100%)'}" ><el-table :data="props.row.family"><el-table-column type="index" width="70" label="排名" prop="name" align="center"/><el-table-column prop="projectNum" label="项目编号" align="left"/><el-table-column prop="projectName" label="项目名称"  align="left"/></el-table></div></template>
</el-table-column><el-table-column width="40" align="center" ><template #default="scope" ><el-icon :size="15" v-if="scope.row.expanded" color="#000000"><Minus/></el-icon><el-icon :size="15" v-else color="#000000"><Plus/></el-icon></template></el-table-column>

二、点击整行展开数据

表格数据：

const tableData = ref([{projectNum:'YCA20241120001',id:'5862458213',projectName:'项目名称项目名称项目名称',month: '2024-10',expanded:false,family: [{projectNum:'YCA20241120001',projectName:'项目名称项目名称项目名称',},{projectNum:'YCA20241120001',projectName:'项目名称项目名称项目名称',}]},{id:'5862456248',projectNum:'YCA20241120001',projectName:'项目名称项目名称项目名称',month: '2024-11',expanded:false,}
])

使用到el-table的三个属性，含义请看element文档

row-key="id"

:expand-row-keys="expands"

@row-click="clickRowHandle"

<el-table :data="tableData" v-loading="state.loading"  @selection-change="selectionChangHandle"@sort-change="sortChangeHandle":border="false" style="width: 100%" row-key="id":expand-row-keys="expands"@row-click="clickRowHandle">
</el-table>

逻辑代码：

const expands = ref([])
//点击事件
const clickRowHandle = (row: any) => {row.expanded=!row.expandedif (expands.value.includes(row.id)) {expands.value = expands.value.filter(val => val !== row.id)}else {expands.value.push(row.id)}
}

三、外部表格序号和排名序号对齐

设置表格el-table-column的padding-left和magin-left是无效的

解决方法：

:cell-style="productiontableStyle"

:headerCellStyle="productiontableStyle"

<el-table-column type="expand" width="1" ><template #default="props"><div class="tableItem" :style="{ width: 'calc(100%)'}" ><el-table :data="props.row.family" :cell-style="productiontableStyle" :headerCellStyle="productiontableStyle"><el-table-column type="index" width="70" label="排名" prop="name" align="center"/><el-table-column prop="projectNum" label="项目编号" align="left"/><el-table-column prop="projectName" label="项目名称"  align="left"/></el-table></div></template>
</el-table-column>

逻辑代码：

const productiontableStyle=(column:any) =>{if(column.columnIndex === 0) {return {'padding-left':'15px'}}
}

Vue3(elementPlus) el-table替换/隐藏行箭头，点击整行展开

element文档链接： https://element-plus.org/zh-CN/component/form.html 一、el-table表格行展开关闭箭头替换成加减号注：Vue3在样式中修改箭头图标无效，可能我设置不对，欢迎各位来交流指导转变思路：隐藏箭头&…...

编程日记 2025/5/15 5:22:36

HTML 音频(Audio)

HTML 音频(Audio) HTML5 引入了新的音频标签 <audio>，使得在网页上嵌入音频文件变得更加简单。在此之前，播放音频通常需要依赖于第三方插件，如 Flash。但随着 HTML5 的普及，浏览器原生支持音频播放，极大地提升了用户体验和网页性能。基本用法要使用 HTML5 的音…...

编程日记 2025/5/15 5:21:21

linux音视频采集技术: v4l2

简介在 Linux 系统中，视频设备的支持和管理离不开 V4L2（Video for Linux 2）。作为 Linux 内核的一部分，V4L2 提供了一套统一的接口，允许开发者与视频设备（如摄像头、视频采集卡等）进行交互。无…...

编程日记 2025/5/11 10:09:53

基于高斯混合模型的数据分析及其延伸应用（具体代码分析）

一、代码分析 （一）清除工作区和命令行窗口 clear; clc;clear;：该命令用于清除 MATLAB 工作区中的所有变量，确保代码运行环境的清洁，避免之前遗留的变量对当前代码运行产生干扰。例如，如果之前运行的代码中…...

编程日记 2025/5/15 4:40:07

内网基础-防火墙-隧道技术

内网对抗-网络通讯篇&防火墙组策略&入站和出站规则&单层双层&C2正反向上线关闭第一个防火墙： 第一个上线就走反向或者正向第二个上线走反向（第二个防火墙阻止入站） 关闭第二个防火墙： 第一个上线就走反向&a…...

编程日记 2025/5/11 14:53:39

123.【C语言】数据结构之快速排序挖坑法和前后指针法

目录 1.挖坑法执行流程代码运行结果可读性好的代码 2.前后指针法(双指针法) 执行流程单趟排序代码将单趟排序代码改造后写法1 简洁的写法 3.思考题 1.挖坑法执行流程 "挖坑法"顾名思义:要有坑位,一开始将关键值放入临时变量key中,在数组中形成…...

编程日记 2025/5/15 3:59:40

【沉默的羔羊心理学】汉尼拔的“移情”游戏：操纵与理解的艺术，精神分析学视角下的角色互动

终极解读《沉默的羔羊》：弗洛伊德精神分析学视角下的深层剖析关键词沉默的羔羊弗洛伊德精神分析学角色心理意识与潜意识性别与身份弗洛伊德精神分析学简介弗洛伊德的精神分析学是心理学的一个重要分支，主要关注人类行为背后的无意识动机和冲突。…...

编程日记 2025/5/10 11:36:46

Bytebase 3.0.1 - 可配置在 SQL 编辑器执行 DDL/DML

🚀 新功能新增环境策略，允许在 SQL 编辑器内直接执行 DDL/DML 语句。支持为 BigQuery 数据脱敏。在项目下新增数据访问控制及脱敏管理页面。在数据库页面，支持回滚到变更历史的某个版本。 🔔 兼容性变更禁止工单创建…...

编程日记 2025/5/14 18:53:07

从零手写线性回归模型：PyTorch 实现深度学习入门教程

系列文章目录 01-PyTorch新手必看：张量是什么？5 分钟教你快速创建张量！ 02-张量运算真简单！PyTorch 数值计算操作完全指南 03-Numpy 还是 PyTorch？张量与 Numpy 的神奇转换技巧 04-揭秘数据处理神器：PyTor…...

编程日记 2025/5/2 3:07:30

git使用指南-实践-搭建git私服

一.创建git私服的核心基础所谓的git私服，其实就是在一个服务器上创建一个个的git仓库，并且这些仓库允许其在一个网络上被其他用户访问。创建一个最素的git私服：随便找一台linux服务器，这里假设其ip为192.168.0.6，使…...

编程日记 2025/5/15 4:56:25

Node.js JXcore 打包教程

Node.js JXcore 打包教程介绍 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许开发者使用 JavaScript 编写服务器端和网络应用程序。JXcore 是一个流行的 Node.js 发行版，它支持将 Node.js 应用程序打包成单一的可执行文件，使得部署和分发变得更加容易…...

编程日记 2025/5/15 3:53:40

Xshell 8 最新中文免安装绿色版

前言 Xshell8是一个非常受欢迎的远程连接管理软件，它的界面简单易懂，用起来特别方便。能支持好多种连接方式，比如SSH1、SSH2、SFTP、TELNET等等，还有串行协议和其他一些高级功能，基本上你想连什么都能满足。而且&…...

编程日记 2025/5/3 1:17:22

结构型模式4.装饰器模式

结构型模式适配器模式（Adapter Pattern）桥接模式（Bridge Pattern）组合模式（Composite Pattern）装饰器模式（Decorator Pattern）外观模式（Facade Pattern）享元…...

编程日记 2025/5/13 11:43:06

备考蓝桥杯：顺序表详解（静态顺序表，vector用法）

目录 1.顺序表的概念 2.静态顺序表的实现总代码 3.stl库动态顺序表vector 测试代码 1.顺序表的概念要理解顺序表，我们要先了解一下什么是线性表线性表是n个具有相同特征的数据元素的序列这就是一个线性表 a1是表头 a4是表尾 a2是a3的前驱 a3是a2的后继空…...

编程日记 2025/5/12 8:56:42

使用uniapp 微信小程序一些好用的插件分享

总结一下自己在开发中遇见的一问题，通过引入组件可以快速的解决 1.zxz-uni-data-select 下拉框选择器(添加下拉框检索，多选功能，多选搜索功能，自定义下拉框插件，使用这个的原因是因为 uniui uview 组件库下拉框太…...

编程日记 2025/5/12 11:26:35

当遇到 502 错误（Bad Gateway）怎么办

很多安装雷池社区版的时候，配置完成，访问的时候可能会遇到当前问题，如何解决呢？ 客户端，浏览器排查 1.刷新页面和清除缓存首先尝试刷新页面，因为有时候 502 错误可能是由于网络临时波动导致服务器无法连…...

编程日记 2025/5/15 5:17:52

R语言安装教程与常见问题

生物信息基础入门笔记 R语言安装教程与常见问题今天和大家聊一个非常基础但是很重要的技术问题——如何在不同操作系统上安装R语言？作为生物信息学数据分析的神兵利器，R语言的安装可谓是入门第一步，学术打工人的必备技能。今天分享在Windows…...

编程日记 2025/5/10 13:52:19

windows 下基于docker 部署 guacamole

背景 Apache Guacamole 是一种无客户端或插件的远程桌面网关。它支持多个标准协议，如 VNC、RDP 和 SSH等。记录下部署过程。步骤 1， 安装docker desktop choco install docker-desktop -y 注： 若windows 11还未安装wsl，则需要…...

编程日记 2025/5/14 22:49:31

JVM实战—OOM的生产案例

1.每秒仅上百请求的系统为何会OOM(RPC超时时间设置过长导致QPS翻几倍) (1)案例背景在这个案例中，一个每秒仅仅只有100请求的系统却因频繁OOM而崩溃。这个OOM问题会涉及：Tomcat底层工作原理、Tomcat内核参数的设置、服务请求超时时间。 (2)系统发生OOM的…...

编程日记 2025/5/11 9:53:33

oracle闪回恢复数据：（闪回查询，闪回表，闪回库，回收站恢复）

oracle的闪回查询，可以查询提交在表空间的闪回数据，并可以还原所查询的数据，用于恢复短时间内的delele 或者 update 误操作，非常方便，缺点是只能恢复大概几小时内的数据。文章目录概要闪回查询恢复数据的主要方法包括…...

编程日记 2025/5/15 4:59:43

STM32 单片机练习项目 LED灯闪烁LED流水灯蜂鸣器未完待续

个人学习笔记文件路径：程序源码\STM32Project-DAP&DAPmini\1-1 接线图 3-1LED闪烁图片新建项目新建项目文件选择F103C8芯片关闭弹出窗口拷贝资料在项目内新建3个文件夹 Start、Library、User Start文件拷贝从资料中拷贝文件文件路径：固…...

编程日记 2025/5/15 4:59:42

计算机网络之---数据传输与比特流

数据传输的概念数据传输是指将数据从一个设备传输到另一个设备的过程。传输过程涉及将高层协议中的数据（如包、帧等）转化为比特流，在物理介质上传输。比特流的概念比特流是数据传输中最基本的单位，它是由0和1组成的连续比特…...

编程日记 2025/5/15 5:06:31

es 单个节点cpu过高

背景： es 单个节点cpu一直持续很高，其它节点cpu不高。观察这个节点的jvm使用率比较高，怀疑是jvm内存没释放导致内存寻址效率低，引起cpu过高。解决方法：手动执行fullgc， 在线执行对业务无影响。 jcmd pi…...

编程日记 2025/5/13 10:02:26

设计模式结构型组合模式（Composite Pattern）与常见技术框架应用解析

组合模式（Composite Pattern）是一种结构型设计模式，它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。通过这种模式，客户端可以一致地处理单个对象和对象组合。在软件开发中，我们经常会遇到处理对象的层…...

编程日记 2025/5/15 4:52:35

pcie学习记录(1)：基于xdma的工程搭建

写在最前面 Vivado的版本！！！（后面验证是错误的思路，可以不用看） XDMA PCIE开发期间两个版本问题的解决https://blog.csdn.net/kris_paul/article/details/128131527 我说实话在这里卡了很久&#xff…...

编程日记 2025/5/15 4:27:38

HTML5 动画效果：淡入淡出（Fade In/Out）详解

HTML5 动画效果：淡入淡出（Fade In/Out）详解淡入淡出（Fade In/Out）是一种常见的动画效果，使元素逐渐显现或消失，增强用户体验。以下是淡入淡出的详细介绍及实现示例。 1. 淡入淡出的特点平滑…...

编程日记 2025/5/3 9:04:12

AI赋能R-Meta分析核心技术：从热点挖掘到高级模型、助力高效科研与论文发表

Meta分析是针对某一科研问题，根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法，对来源不同的研究成果进行收集、合并及定量统计分析的方法，现已广泛应用于农林生态，资源环境等方面，成为Science、Nature论文的…...

编程日记 2025/5/12 17:42:37

maven如何从外部导包

1.找到你项目的文件位置，将外部要导入的包复制粘贴进你当前要导入的项目下。 2.从你的项目目录下选中要导入的包的pom文件即可导包成功注意一定是选中对应的pom文件导入成功之后对应的pom.xml文件就会被点亮...

编程日记 2025/5/13 8:14:56

首先要有一个gmail邮箱：https://accounts.google.com/lifecycle/steps/signup/name?ddm1&dshS237022023:1736341599452877&flowEntrySignUp&flowNameGlifWebSignIn&TLAE–Llw01wbAW0P9gYEloi_C5wBurZd0MeIi4B1j8daH-72CNcc-1qwapbIRA_UZ&conti…...

编程日记 2025/5/12 8:04:25

Android 绘制学习总结

1、刷新率介绍我们先来理一下基本的概念： 1、60 fps 的意思是说，画面每秒更新 60 次 2、这 60 次更新，是要均匀更新的，不是说一会快，一会慢，那样视觉上也会觉得不流畅 3、每秒 60 次，也就是 1…...

编程日记 2025/5/12 7:24:30

推动多语言语音科技迈向新高度：INTERSPEECH 2025 ML-SUPERB 2.0 挑战赛

随着语音技术在各领域应用的迅速扩展，全球语言与口音的多样性成为技术进一步突破的重大挑战。为了应对这一难题，来自卡内基梅隆大学（CMU）、斯坦福大学（Stanford University）、乔治梅森大学(George Mason Un…...

编程日记 2025/5/15 3:48:57

『SQLite』子查询可以这样用

摘要：本节主要讲子查询的使用，可以在查询、更新、修改、删除等操作中使用。什么是子查询？ 子查询是一种在 SELECT-SQL 语言中嵌套查询下层的程序模块。当一个查询是另一个查询的条件时，称之为子查询（Sub Query&#…...

编程日记 2025/5/15 4:42:38

thingsboard通过mqtt设备连接及数据交互---记录一次问题--1883端口没开，到服务器控制面板中打开安全组1883端口

1，链接不上：原因是1883端口没开，到服务器控制面板中打开安全组1883端口 2，参考链接： https://blog.csdn.net/bujingyun8/article/details/120024788...

编程日记 2025/5/14 5:03:27

Pod状态为“被驱逐(evicted)”的解决思路

在Kubernetes集群中，Pod状态为“被驱逐（evicted）”表示Pod无法在当前节点上继续运行，已被集群从节点上移除。针对Pod被驱逐的问题，以下是一些常见的解决方法： 一、识别被驱逐的原因资源不足：…...

编程日记 2025/5/15 4:33:40

【代码随想录-数组篇02】：双指针(快慢指针)法相关力扣练习题

提示1：本篇共包含5道题，全部用python语言进行实践，看会不如行动会，请大家多多实践～ 提示2：强烈推荐代码随想录提示3：博主最近在跟着【代码随想录】进行刷题，有小伙伴有想法的可以私…...

编程日记 2025/5/14 6:55:07

Docker基础

Docker基础命令介绍其中，比较常见的命令有： 命令说明文档地址docker pull拉取镜像docker pulldocker push推送镜像到DockerRegistrydocker pushdocker images查看本地镜像docker imagesdocker rmi删除本地镜像docker rmidocker run创建并运行容器&am…...

编程日记 2025/5/3 14:02:54

计算机网络之---传输介质

传输介质的定义传输介质是计算机网络中用于传递信号的物理媒介。它将数据从发送方传输到接收方，可以是有线的（如铜线、电缆、光纤等）或者无线的（如无线电波、微波等）。传输介质的作用是承载和传播物理信号&#xff08…...

编程日记 2025/5/14 18:57:22

数据结构：LinkedList与链表—面试题（三）

目录 1、移除链表元素 2、反转链表 3、链表的中间结点 4、返回倒数第k个结点 5、合并两个有序链表 1、移除链表元素习题链接https://leetcode.cn/problems/remove-linked-list-elements/description/ 描述：给你一个链表的头节点 head 和一个整数 val &#xff…...

编程日记 2025/5/14 21:14:04

P10424 [蓝桥杯 2024 省 B] 好数

题目描述一个整数如果按从低位到高位的顺序，奇数位（个位、百位、万位……）上的数字是奇数，偶数位（十位、千位、十万位……）上的数字是偶数，我们就称之为“好数”。给定一个正整数 N&#xf…...

编程日记 2025/5/6 5:24:47

MySQL - 子查询和相关子查询详解

在SQL中，子查询（Subquery）和相关子查询（Correlated Subquery）是非常强大且灵活的工具，可以用于执行复杂的数据检索和操作。它们允许我们在一个查询中嵌套另一个查询，从而实现更复杂的逻辑和条件…...

编程日记 2025/5/14 20:38:21

MySQL入门学习笔记

第一章数据库系统概述数据库的4个基本概念数据、数据库、数据库管理系统、数据库系统是与数据库技术密切相关的4个基本概念数据数据是数据库中存储的基本对象，描述事物的符号记录称为数据，数据的表现形式还不能完全表达其内容，需要…...

编程日记 2025/5/11 20:35:57

使用vue-pdf预览pdf和解决pdf电子签章显示问题

使用vue-pdf预览pdf和解决pdf电子签章显示问题第一步：npm install vue-pdf 第二步页面使用vue-pdf <template><div class"pdf1"><Pdf v-for"i in numPages" :key"i" :src"src" :page"i" />…...

编程日记 2025/5/14 15:38:46

MySQL Windows 11 的 MySQL 配置文件 (my.ini) 路径查找指南

✅ Windows 11 的 MySQL 配置文件 (my.ini) 路径查找指南在 Windows 11 上，MySQL 的 ini 配置文件（通常是 my.ini 或 my.cnf）的位置取决于 MySQL 的安装方式。下面是一些常见的路径和方法来找到这个配置文件。 🔍 方法 1&#…...

编程日记 2025/5/13 21:14:08

记一次k8s下容器启动失败，容器无日志问题排查

问题背景本地开发时，某应用增加logback-spring.xml配置文件，加入必要的依赖： <dependency><groupId>net.logstash.logback</groupId><artifactId>logstash-logback-encoder</artifactId><version>8…...

编程日记 2025/5/12 12:26:45

Delaunay三角刨分算法理解及c#过程实现

Delaunay三角刨分算法理解及c#过程实现 0 引言1 关于三角剖分2 Delaunay三角剖分算法实现及对比3 结语0 引言 💻💻AI一下💻💻 三角剖分是什么？三角剖分是一种将平面或曲面划分成三角形集合的方法。在二维平面中，给定一个平面区域（可以是多边形等），通过连接区域…...

编程日记 2025/5/4 6:33:23

【单片机】实现一个简单的ADC滤波器

实现一个 ADC的滤波器，PT1 滤波器（也称为一阶低通滤波器），用于对输入信号进行滤波处理。 typedef struct PT1FilterSettings PT1FilterSettings; struct PT1FilterSettings {//! last Filter output valueuint32_t filtValOld;//…...

编程日记 2025/5/11 1:32:24

在 Ubuntu 22.04 上从 Wayland 切换到 X11的详细步骤

在 Ubuntu 22.04 上从 Wayland 切换到 X11，步骤其实很简单，主要是在登录界面进行选择。以下是详细的步骤： 步骤 1：退出当前会话首先，点击屏幕右上角的用户菜单，选择注销或退出，以退出当前…...

编程日记 2025/5/10 15:32:31

NOVA：AutoRegressive Video Generation Without Vector Quantization——自回归视频生成无需向量量化

这篇文章介绍了一种名为NOVA的新型自回归模型，用于高效的文本到图像和文本到视频生成。以下是文章的主要内容总结： 1. 研究背景与问题自回归大语言模型（LLMs）在自然语言处理（NLP）中表现出色，但…...

编程日记 2025/5/9 23:41:28

79 Openssl3.0 RSA公钥加密数据

1 引言最近不小心用到了openssl3.0，项目中需要使用rsa非对称加解密算法，所以把openssl3.0使用公钥加密数据的函数调用摸了一遍。之所以记录此篇文章，是因为网络上大多数是openssl3.0以前的版本的函数接口，而openssl3.0之后已经丢…...

编程日记 2025/5/11 2:13:02

基于单片机的数字电子秒表设计

此文章谨为课设记录一、实验要求题目六数字电子时钟基本要求： (1) 设计一个单片机电子时钟，设计的电子时钟通过数码管显示； (2) 具有能通过按键实现设置时间的功能； (3) 显示格式为小时十位、小时个位，分…...

编程日记 2025/4/29 13:22:49

一、el-table表格行展开关闭箭头替换成加减号

1、隐藏箭头

2、去掉箭头空白，添加替换箭头的图标列

二、点击整行展开数据

三、外部表格序号和排名序号对齐

相关文章：