el-table实现展开当前行时收起上一行的功能


<el-tableref="tableRef":data="tableData":expand-row-keys="expandRowKeys":row-key="handleRowKey" // 必须指定 row-key@expand-change="handleExpandChange" // 当用户对某一行展开或者关闭的时候会触发该事件>
</el-table>
props: {idName: {type: String,default: "id",}, // 表格行的唯一标识
},data() {return {ids: [], // 选中的行的ids数组expandRowKeys: [], // 存储展开行的 keys};},methods: {handleRowKey(row) {return row[this.idName];},/*** @Event 当用户对某一行展开或者关闭的时候会触发该事件* @description: 展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded* @author: mhf* @time: 2023-11-12 14:08:29**/handleExpandChange(row) {const rowKey = row[this.idName]; // 如果不写idName可以自己指定,如 rowKey = "id"if (this.expandRowKeys === [] || this.expandRowKeys.length === 0) {// 如果没有行展开,则添加当前行的 key 到 expandRowKeys 中this.expandRowKeys.push(rowKey);} else {// 如果已经有行被展开,就收起上一行if (this.expandRowKeys.includes(rowKey)) {// 如何再次点击当前行,就收起当前行this.expandRowKeys = [];} else {// 第一次点击这一行,就将当前行的 key 放入 expandRowKeys 中this.expandRowKeys = [rowKey];}}},
}
相关文章:
el-table实现展开当前行时收起上一行的功能
<el-tableref"tableRef":data"tableData":expand-row-keys"expandRowKeys":row-key"handleRowKey" // 必须指定 row-keyexpand-change"handleExpandChange" // 当用户对某一行展开或者关闭的时候会触发该事件> <…...
Go的优雅退出
Go优雅退出/停机以前主要通过signal来实现,当然现在也是通过signal来实现,只是从go 1.16开始,新增了更加友好的API: func NotifyContext(parent context.Context, signals ...os.Signal) (ctx context.Context, stop context.CancelFunc) 该…...
【KVM-6】KVM/QEMU软件栈
前言 大家好,我是秋意零。 👿 简介 🏠 个人主页: 秋意零🔥 账号:全平台同名, 秋意零 账号创作者、 云社区 创建者🧑 个人介绍:在校期间参与众多云计算相关比赛&#x…...
硬件知识2
原理图的检查: 网络悬浮 单端网络 电源悬浮(电源和地) 重复的位号 网络短路(电源和地) AD里面双击messages里面的错误项会直接进入到原理图和PCB…...
【Java 进阶篇】JQuery DOM操作:通用属性操作的绝妙魔法
在前端的舞台上,JQuery犹如一位魔法师,为我们展现了操纵HTML元素的奇妙技巧。而在这个技巧的精妙组成中,通用属性操作是一门绝妙的魔法。在本篇博客中,我们将深入研究JQuery DOM操作中的通用属性操作,揭示这段魔法的神…...
在任何机器人上实施 ROS 导航堆栈的指南
文章目录 路径规划参考 路径规划 路径规划是导航的最终目标。这允许用户向机器人给出目标姿势,并让它在给定的环境中自主地从当前位置导航到目标位置。这是我们迄今为止所做的一切(地图绘制和本地化)的汇集点。ROS 导航堆栈已经为我们完成了…...
Android 中注解的使用
Android Support Library 从 19.1 版本开始引入了一个新的注解库,其中包含了很多的元注解,使用它们修饰我们的代码, 可以让我们提高程序的开发效率,让我们更早的发现问题。以及对代码施以规范,让代码更加有可读性。这篇…...
我国陆地遥感卫星发展现状与展望
一、引言 从20世纪90年代末至今,我国陆地遥感卫星事业历经二十多年,实现了从无到有、从小到大、从弱到强的跨越发展。随着高分辨率对地观测系统重大专项(高分专项)、《陆海观测卫星业务发展规划(2011—2020年ÿ…...
arcgis基础篇--实验
一、绘制带空洞的面要素 方法一:先绘制出一个面区域,然后在面上再绘制一个面区域代表面洞,两者位于同一个图层内,选中代表面洞的区域,选择【编辑器】-【裁剪】工具,将面裁剪出一个洞,随后删除代…...
【chatglm3】(3):在AutoDL上,使用4090显卡,部署ChatGLM3API服务,并微调AdvertiseGen数据集,完成微调并测试成功!附视频演示。
在AutoDL上,使用4090显卡,部署ChatGLM3API服务,并微调AdvertiseGen数据集,完成微调并测试成功! 其他chatgpt 和chatglm3 资料: https://blog.csdn.net/freewebsys/category_12270092.html 视频地址&#…...
python爬虫top250电影数据
之前看到的,我改了一下,多了很多东西 import requests from bs4 import BeautifulSoup from openpyxl import Workbook from openpyxl.styles import Font import redef extract_movie_info(info):# 使用正则表达式提取信息pattern re.compile(r导演:…...
STL简介+浅浅了解string——“C++”
各位CSDN的uu们好呀,终于到小雅兰的STL的学习了,下面,让我们进入CSTL的世界吧!!! 1. 什么是STL 2. STL的版本 3. STL的六大组件 4. STL的重要性 5. 如何学习STL 6.STL的缺陷 7.为什么要学习string类 …...
wpf 和winform 的区别
WPF (Windows Presentation Foundation) 和 WinForms (Windows Forms) 是 Microsoft .NET 桌面应用程序开发中两种不同的技术框架,它们有一些重要的区别: 1. **UI 抽象层次结构:** - **WinForms:** 使用基于控件(Controls)的 …...
【Apifox】国产测试工具雄起
在开发过程中,我们总是避免不了进行接口的测试, 而相比手动敲测试代码,使用测试工具进行测试更为便捷,高效 今天发现了一个非常好用的接口测试工具Apifox 相比于Postman,他还拥有一个非常nb的功能, 在接…...
PNAS | 蛋白质结构预测屈服于机器学习
今天为大家介绍的是来自James E. Rothman的一篇短文。今年的阿尔伯特拉斯克基础医学研究奖表彰了AlphaFold的发明,这是蛋白质研究历史上的一项革命性进展,首次提供了凭借序列信息就能够准确预测绝大多数蛋白质的三维氨基酸排列的实际能力。这一非凡的成就…...
PlayCanvas通过IFrame嵌入页面如何与canvasplay脚本通讯
PlayCanvas可以通过IFrame嵌入HTML页面,实现混合编程,扩充PlayCanvas的页面功能。 问:在IFrame嵌入页面中如何与PlayCanvas通讯,调用PlayCanvas功能? 答:可以调用PlayCanvas的全局对象pc来访问其他脚本&…...
springboot整合Redis后间歇性io.lettuce.core.RedisCommandTimeoutException
在springboot中引入spring-boot-starter-data-redis依赖时,默认使用的时Lettuce 产生这种问题的原因有如下两点: 1、Lettuce 自适应拓扑刷新(Adaptive updates)与定时拓扑刷新(Periodic updates) 是默认关闭…...
基于springboot+vue的学生毕业离校信息网站
项目介绍 该学生毕业离校系统包括管理员、学生和教师。其主要功能包括管理员:首页、个人中心、学生管理、教师管理、离校信息管理、费用结算管理、论文审核管理、管理员管理、留言板管理、系统管理等,前台首页;首页、离校信息、网站公告、留…...
基于C#+WPF编写的调用讯飞星火大模型工具
工具源码:https://github.com/lishuangquan1987/XFYun.SparkChat 工具效果截图: 支持流式输出: 其中ApiKey/ApiSecret/AppId需要自己到讯飞星火大模型官网去注册账号申请,免费的。 申请地址:https://xinghuo.xfyun.cn/ 注册之…...
科普测量开关电源输出波形的三种方法及电源波形自动化测试步骤
开关电源波形测试就是对开关电源的输出波形进行检测和分析,观察开关电源参数变化,以此来判断开关电源的性能是否符合要求。好的开关电源对于设备以及整个电路的正常运行是非常重要的,因此开关电源输出波形测试是开关电源测试的重要环节&#…...
信号量实战:多进程协同操作有限缓冲区的伪代码精解
1. 信号量机制与生产者-消费者模型 想象一下餐厅后厨的场景:厨师(生产者)不断制作菜品,服务员(消费者)将菜品端给顾客。如果厨师做菜太快,服务员来不及端走,菜品就会堆积;…...
微前端状态管理的真相:Module Federation + 跨应用通信实战
本周大前端要闻Compose Multiplatform v1.11.10-alpha01:进一步完善跨平台 UI 状态同步能力,ViewModel 共享机制改进KotlinConf’26 演讲阵容公布:多场 Session 聚焦 Kotlin 多平台架构与状态管理,值得关注Retrofit 3.0.0 正式发布…...
Claude Code 接入 DeepSeek、GLM、MiniMax 等国产大模型,保姆级教程!
每天免费领 1亿 Token,白嫖DeepSeek、GLM、MiniMax、Kimi等大模型! 这份指南是专门为那些“只想赶紧上手开干”的朋友准备的。 咱们不整那些虚头巴脑的理论,直接帮你搞定这几件事: 怎么把 Claude Code 装好如何确定它已经能跑通…...
拆解Clonezilla镜像:除了partclone,你还需要知道的底层原理与工具链
拆解Clonezilla镜像:从分卷压缩到文件系统的技术全景解析 当我们需要从Clonezilla备份中提取单个文件时,传统方法往往要求完整恢复整个镜像——这种"全有或全无"的方式在存储资源有限的情况下显得尤为笨重。本文将带您深入Clonezilla镜像的底层…...
解锁Intel GPU的CUDA能力:从零开始的跨硬件计算实践
解锁Intel GPU的CUDA能力:从零开始的跨硬件计算实践 【免费下载链接】ZLUDA CUDA on non-NVIDIA GPUs 项目地址: https://gitcode.com/GitHub_Trending/zl/ZLUDA 当实验室电脑只有Intel集成显卡却需要运行CUDA加速程序时,当笔记本的Iris Xe显卡面…...
抖音视频批量下载工具全攻略:从效率提升到合规应用
抖音视频批量下载工具全攻略:从效率提升到合规应用 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support.…...
水下图像增强,水下增强,失真矫正,矫正复原含讲解复现,含代码注释,程序一看就懂。
水下图像增强,水下增强,失真矫正,矫正复原 含讲解复现,含代码注释,程序一看就懂。...
用Python模拟随机游走:从一维到三维,直观理解马尔可夫链的常返性
用Python模拟随机游走:从一维到三维,直观理解马尔可夫链的常返性 随机游走是概率论中最迷人的概念之一,它像一面镜子,映照出微观粒子运动、金融市场波动甚至社交网络传播的底层规律。当我第一次在Jupyter Notebook中模拟出随机游走…...
7个实用技巧让你轻松掌握E-Hentai漫画下载与管理
7个实用技巧让你轻松掌握E-Hentai漫画下载与管理 【免费下载链接】E-Hentai-Downloader Download E-Hentai archive as zip file 项目地址: https://gitcode.com/gh_mirrors/eh/E-Hentai-Downloader 漫画下载痛点与解决方案 作为漫画爱好者,你是否遇到过这些…...
如何用mootdx解决金融数据获取难题?探索量化分析的高效路径
如何用mootdx解决金融数据获取难题?探索量化分析的高效路径 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 问题发现:金融数据分析的三大痛点 当你准备构建量化交易模型时…...
