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];}}},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/178399.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

折扣零售新浪潮,揭秘品牌如何盘活千家门店

近两年&#xff0c;随着新经济环境的革新&#xff0c;人们流行起了“反向消费”&#xff0c;开始追求高性价的特价好物。于是&#xff0c;顺应人们消费理念和新需求的折扣零售便开始日渐火热&#xff0c;也让更多品牌与资本加入折扣零售赛道。 根据《2023-2028年中国折扣商店行…

云课五分钟-04一段代码学习-大模型分析C++

前篇&#xff1a; 云课五分钟-03第一个开源游戏复现-贪吃蛇 经过01-03&#xff0c;基本了解云课最大的优势之一就是快速复现&#xff08;部署&#xff09;。 视频&#xff1a; 云课五分钟-04一段代码学习-大模型分析C AIGC大模型时代&#xff0c;学习编程语言的方式&#xf…

基于 Keras 的图像分类器

引言 深度学习是使用人工神经网络进行机器学习的一个子集&#xff0c;目前已经被证明在图像分类方面非常强大。尽管这些算法的内部工作在数学上是严格的&#xff0c;但 Python 库(比如 keras)使这些问题对我们所有人都可以接近。在本文中&#xff0c;我将介绍一个简单的图像分…

Turbos Finance DEX提供高效的智能路由

将金融行业去中心化&#xff0c;是DeFi中最突出的崇高目标。DeFi倡导者希望建立基于区块链技术的点对点金融&#xff0c;实现高效的交易&#xff0c;并让社会各阶层的人们有机会投资和储蓄。 Turbos Finance的联合创始人兼首席执行官Ted Shao表示&#xff1a;“我们设想一个金…

微服务概览

单体架构 传统的软件应用为单体架构。尽管也是模块化逻辑&#xff0c;但是最终还是会打包并并部署为单体应用。最主要的原因是太复杂。并且应用扩展性低&#xff0c;可靠性也低。敏捷开发和部署变得无法完成。 治理办法&#xff1a;化繁为简&#xff0c;分而治之。 微服务起源…

【坑】idea终端下执行maven命令行报错:mvn clean install -Dspring.profiles.active=dev

直接看报错信息 解决方法 方法一 命令改为&#xff1a;mvn clean install -Dspring.profiles.activedev方法二 使用 cmd 进入命令行执行&#xff1a;mvn clean install -Dspring.profiles.activedev在新版本中的idea终端已经默认使用了类似windons10下的PowerShell窗口的风格…

用这个平台制作电子杂志,,还能实时分享,太方便啦!

在我们看电子杂志的时候&#xff0c;总会觉得图文效果有点枯燥&#xff0c;如果能做出翻页书效果的电子杂志&#xff0c;还给人一种身临其境的真实翻书感就好了。 其实制作这种翻页电子杂志很简单&#xff0c;不需要下载安装任何软件&#xff0c;只需登录FLBOOK这个平台 &…

如何挑选猫主食罐头?宠物店自用的5款猫主食罐头推荐!

临近双十二大促&#xff0c;是时候给家里的猫主子屯猫主食罐头了。许多铲屎官看大促的各种品牌宣传&#xff0c;看到眼花缭乱&#xff0c;不知道选哪些猫主食罐头好&#xff0c;胡乱选又怕踩坑。 猫罐头侠闪亮登场&#xff01;如何挑选猫主食罐头&#xff1f;作为经营宠物店7年…

Python+selenium自动化测试

批量执行完用例后&#xff0c;生成的测试报告是文本形式的&#xff0c;不够直观&#xff0c;为了更好的展示测试报告&#xff0c;最好是生成HTML格式的。 unittest里面是不能生成html格式报告的&#xff0c;需要导入一个第三方的模块&#xff1a;HTMLTestRunner 一、导入HTML…

FSOD论文阅读 - 基于卷积和注意力机制的小样本目标检测

来源:知网 标题:基于卷积和注意力机制的小样本目标检测 作者:郭永红&#xff0c;牛海涛&#xff0c;史超&#xff0c;郭铖 郭永红&#xff0c;牛海涛&#xff0c;史超&#xff0c;郭铖&#xff0e;基于卷积和注意力机制的小样本目标检测 [J/OL]&#xff0e;兵工学报. https://…

【unity插件】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

文章目录 前言地址描述Demo 演示Installation 安装如何玩演示用法使用示例完结 前言 一般的shader无法直接使用在UI上&#xff0c;需要在shader中定义特定的面板参数&#xff0c;今天就来推荐github上大佬做的一套开源的一系列UGUI&#xff0c;Shader实现的特效——UIEffect 为…

汽车制动系统技术分析概要

目录 1.基本功能概述 2. 基本工作原理分析 2.1 Two-Box系统架构(Bosch_IBooster) 2.2 One-Box系统架构(Bosch_IPB) 2.3 ​​​​​​​ABS技术 2.4 TCS技术 2.5 VDC技术 2.6 EPB技术 2.7 小结 3. 该场景应用发展趋势分析 1.基本功能概述 传统汽车的底盘主要由传动系、…