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

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.lryc.cn/news/228641.html

相关文章:

  • Go的优雅退出
  • 【KVM-6】KVM/QEMU软件栈
  • 硬件知识2
  • 【Java 进阶篇】JQuery DOM操作:通用属性操作的绝妙魔法
  • 在任何机器人上实施 ROS 导航堆栈的指南
  • Android 中注解的使用
  • 我国陆地遥感卫星发展现状与展望
  • arcgis基础篇--实验
  • 【chatglm3】(3):在AutoDL上,使用4090显卡,部署ChatGLM3API服务,并微调AdvertiseGen数据集,完成微调并测试成功!附视频演示。
  • python爬虫top250电影数据
  • STL简介+浅浅了解string——“C++”
  • wpf 和winform 的区别
  • 【Apifox】国产测试工具雄起
  • PNAS | 蛋白质结构预测屈服于机器学习
  • PlayCanvas通过IFrame嵌入页面如何与canvasplay脚本通讯
  • springboot整合Redis后间歇性io.lettuce.core.RedisCommandTimeoutException
  • 基于springboot+vue的学生毕业离校信息网站
  • 基于C#+WPF编写的调用讯飞星火大模型工具
  • 科普测量开关电源输出波形的三种方法及电源波形自动化测试步骤
  • 【优化版】DOSBox及常用汇编工具的详细安装教程
  • 【Devchat 插件】创建一个GUI应用程序,使用Python进行加密和解密
  • 运行pytest时,给出警告 PytestConfigWarning: Unknown config option: result_log
  • 初始MySQL(五)(自我复制数据,合并查询,外连接,MySQL约束:主键,not null,unique,foreign key)
  • ssh秘钥登录
  • Vue3+NodeJS 接入文心一言, 发布一个 VSCode 大模型问答插件
  • VUE element组件生成的全选框如何获取值
  • 第三章:代码块
  • javaEE案例,前后端交互,计算机和用户登录
  • 安卓学习记录
  • gradle 使用记录