Element-plus点击当前行之后获取数据显示跟随行数据

要实现点击当前行后,在当前行的下方显示数据,可以通过以下步骤来实现:

  1. 在表格的行点击事件中获取当前点击行的位置信息。
  2. 根据位置信息动态计算并设置需要显示数据区域的位置。

下面是一个更新后的示例代码,演示如何在 Element-Plus 的表格中实现点击当前行获取数据并在当前行下方显示数据的功能:

<template><div><el-table:data="tableData"@row-click="handleRowClick"ref="table"><el-table-columnprop="name"label="Name"></el-table-column><el-table-columnprop="age"label="Age"></el-table-column></el-table><el-popoverv-if="selectedRow"v-model="popoverVisible"trigger="manual"placement="bottom"width="200"><div><h2>Selected Row Data:</h2><p>Name: {{ selectedRow.name }}</p><p>Age: {{ selectedRow.age }}</p></div></el-popover></div>
</template><script>
export default {data() {return {tableData: [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 28 }],selectedRow: null,popoverVisible: false};},methods: {handleRowClick(row) {this.selectedRow = row;this.$nextTick(() => {const tableEl = this.$refs.table.$el;const rowEl = tableEl.querySelector(.el-table__body tr[data-row-key="${row._rowKey}"]);if (rowEl) {const rect = rowEl.getBoundingClientRect();const top = rect.top + rect.height + window.scrollY;this.$refs.popover.$refs.popper.style.top = ${top}px;}this.popoverVisible = true;});}}
};
</script>

在这个更新后的示例中,我们通过使用el-popover组件来在当前行下方显示数据,同时在handleRowClick方法中动态计算并设置el-popover的位置,使其显示在当前点击行的下方。我们使用了$nextTick方法来确保在表格渲染完成后再计算位置信息,以确保能够正确获取行元素的位置。

通过这种方式,当用户点击表格的某一行时,会在当前行的下方显示相应的数据信息,实现了在当前行下方显示数据的效果。

在 Element Plus 的 el-table 中使用 el-table-column 的 type=“expand” 可以实现展开行功能。以下是关于该功能的示例代码和注释:

<!-- 在外层的table中设置关键属性 -->
<el-table :data="tableList"style="width: 100%"@expand-change="expandColumn" :row-key="getRowKeys" :expand-row-keys="expands"
>
</el-table><!-- 在内层设置展开行的书写插槽 -->
<el-table-column type="expand" fixed><template #default><!-- 书写对应内容即可 --></template>
</el-table-column>

在以上示例代码中,您可以看到如何在外层的 el-table 中设置了关键属性,并在内层的 el-table-column 中设置了展开行的插槽。通过这样的设置,您可以实现展开行的功能。接下来是对应的逻辑代码:

let expandColumn = (row, expandedRows) => {// row 被点击当前行的数据// expandedRows 存放页面中被展开行的数据,对应的数组就是 expand-row-keys// 通过 expandedRows 的长度来判断用户是点击展开还是折叠if (expandedRows.length) {// 展开expands.value = [];// 先干掉之前展开的行if (row) {expands.value.push(row.id); // push 新的行 (原理有点类似防抖)}} else {expands.value = []; // 折叠,清空 expand-row-keys 对应的数组}
};let getRowKeys = (row) => {// row 是当前行的数据// 给每行绑定唯一的标识return row.id;
};

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

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

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

相关文章

Unity 引擎收费模式变革:游戏开发者的挑战与机遇

Unity 引擎作为游戏开发领域中的重要工具&#xff0c;近日宣布将在 2024 年 1 月 1 日起根据游戏安装量对开发者进行收费。这一决定引起了业界的广泛关注和讨论。据 Unity 技术博客发布的《Unity 收费模式和配套服务更新》一文&#xff0c;他们选择这种计费方式是基于每次游戏被…

PHP和phpSpider:如何应对网站变动导致的数据爬取失败?

php和phpspider&#xff1a;如何应对网站变动导致的数据爬取失败&#xff1f; 导语&#xff1a; 网络爬虫是一种自动化程序&#xff0c;用于从网站上获取数据并进行处理。PHP是一种广泛使用的编程语言&#xff0c;而phpSpider是一个基于PHP的开源网络爬虫框架。然而&#xff0…

软降工程学系统实现

一、程序编码 程序编码是设计的继续&#xff0c;将软件设计的结果翻译成用某种程序设计语言描述的源代码。 程序编码涉及到方法、工具和过程。 程序设计风格和程序设计语言的特性会深刻地影响软件的质量和可维护性。 要求源程序具有良好的结构性和设计风格。 程序设计风格…

开启IT世界的探索之旅——致有志于踏入IT领域的高考少年们

高考已成过去&#xff0c;而前方是无限可能的未来。对于那些有志于进入IT领域的高考生来说&#xff0c;这个暑假是你们开启探索IT世界的绝佳时机。作为一名从事C#软件开发的专业人员&#xff0c;我希望能通过这篇文章&#xff0c;分享一些学习路线图和经验心得&#xff0c;帮助…

【web3】分享一个web入门学习平台-HackQuest

前言 一直想进入web3行业&#xff0c;但是没有什么途径&#xff0c;偶然在电鸭平台看到HackQuest的共学营&#xff0c;发现真的不错&#xff0c;并且还接触到了黑客松这种形式。 链接地址&#xff1a;HackQuest 平台功能 学习路径&#xff1a;平台有完整的学习路径&#xff…

【聊聊原子性,中断,以及nodejs中的具体示例】

什么是原子性 从一个例子说起&#xff0c; x &#xff0c;读和写 &#xff0c; 如图假设多线程&#xff0c;线程1和线程2同时操作变量x&#xff0c;进行x的操作&#xff0c;那么由于写的过程中&#xff0c;都会先读一份x数据到cpu的寄存器中&#xff0c;所以这个时候cpu1 和 c…

MyBatis-plus(下)

目录 静态工具 逻辑删除 枚举处理器 ​编辑​编辑JSON处理器 分页插件 案例 静态工具 只有save与update不需要传class字节码 UserController: MyServiceImpl: 改造根据id批量查询用户的接口&#xff0c;查询用户的同时&#xff0c;查询出用户对应的所有地址 Overrid…

容器内存

一、容器内存概述 容器本质上还是一个进程&#xff0c;是一个被隔离和限制的进程。因此容器内存和进程内存在表现形式上其实是一样的&#xff0c;这块主要涉及三部分内容&#xff1a;RSS&#xff0c;page cache和swap这三部分&#xff0c;容器基于memory Cgroup对内存进行限制…

用国内镜像安装docker 和 docker-compose (ubuntu)

替代方案&#xff0c;改用国内的镜像站(网易镜像&#xff09; 1.清除旧版本&#xff08;可选操作&#xff09; for pkg in docker.io docker-doc docker-compose podman-docker containerd runc; do apt-get remove $pkg; done 2.安装docker apt-get update 首先安装依赖 apt-g…

Linux驱动开发实战宝典:设备模型、模块编程、I2C/SPI/USB外设精讲

摘要: 本文将带你走进 Linux 驱动开发的世界,从设备驱动模型、内核模块开发基础开始,逐步深入 I2C、SPI、USB 等常用外设的驱动编写,结合实际案例,助你掌握 Linux 驱动开发技能。 关键词: Linux 驱动,设备驱动模型,内核模块,I2C,SPI,USB 一、Linux 设备驱动模型 Li…

mysql创建表的规范

名称 建表的时候&#xff0c;给表&#xff0c;字段和索引起个好名字 见名知意&#xff1a;好的名字能够降低沟通和维护的成本名字不宜过长&#xff0c;尽量控制在30个字符以内 大小写 名字尽量都用小写字母&#xff0c;因为从视觉上&#xff0c;小写字母更容易让人读懂全部大写…

Linux嵌入式中MQTT的使用

MQTT是什么&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输协议&#xff09;&#xff0c;是一种基于发布/订阅&#xff08;Publish/Subscribe&#xff09;模式的轻量级通讯协议&#xff0c;该协议构建于TCP/IP协议上&#xff0…

驾驭npm更新之力:深入掌握npm update命令的精髓

驾驭npm更新之力&#xff1a;深入掌握npm update命令的精髓 在JavaScript和Node.js的世界中&#xff0c;npm&#xff08;Node Package Manager&#xff09;作为默认的包管理器&#xff0c;扮演着至关重要的角色。它不仅用于安装和管理项目依赖&#xff0c;还提供了更新这些依赖…

SpringBoot3.3集成knif4j-swagger文档方式和使用案例

springboot3 集成 knif4j &#xff1a; 访问地址&#xff1a; swagger 接口文档默认地址&#xff1a;http://localhost:8080/swagger-ui.html# Knife4j 接口文档默认地址&#xff1a;http://127.0.0.1:8080/doc.html Maven: <dependency><groupId>com.github.x…

2024 COMMUNITY DAY User Group 社区嘉年华 云计算与 AI 技术交融盛会共筑多元智慧未来

亚马逊云科技User Group&#xff0c;深圳 Community Day 活动流程抢先知道&#xff01; ⏰ 7月7日 &#x1f3e0; 深圳南山区香港中文大学 &#x1f4e3;主论坛国际大咖云集&#xff0c;共襄科技盛宴&#xff01; &#x1f389;三大主题论坛&#xff1a;人工智能、大数据、动…

MyBatis系列三: XxxMapper.xml-SQL映射文件

XxxMapper.xml-SQL映射文件 官方文档基本介绍详细说明基本使用parameterType(输入参数类型)传入HashMapresultMap(结果集映射) 官方文档 文档地址: https://mybatis.org/mybatis-3/zh_CN/sqlmap-xml.html 基本介绍 1.MyBatis的真正强大在于它的语句映射(在XxxMapper.xml配置…

2024年06月CCF-GESP编程能力等级认证Python编程一级真题解析

本文收录于专栏《Python等级认证CCF-GESP真题解析》,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 一、单选题(每题 2 分,共 30 分) 第 1 题 小杨父母带他到某培训机构给他报名参加CCF组织的GESP认证考试的第1级,那他可以选择的认证语言有几种?( ) A. 1 B. 2 C…

React@16.x(45)路由v5.x(10)源码(2)- history

目录 1&#xff0c;作用1.1&#xff0c;createBrowserHistory1.2&#xff0c;createHashHistory1.3&#xff0c;createMemoryHistory 2&#xff0c;history 对象的属性2.1&#xff0c;action2.2&#xff0c;push / replace / go / goBack / goForward2.3&#xff0c;location2.…

网络配线架的隐藏功能

网络布线是确保现代信息社会高效运转的关键技术之一。在这一领域&#xff0c;网络配线架扮演着至关重要 的角色。它不仅仅是一个简单的物理连接点&#xff0c;更拥有许多隐藏功能&#xff0c;这些功能极大地提升了网络的 效率、稳定性和可管理性。 1、集中管理 网络配线架提…

【BES2500x系列 -- RTX5操作系统】深入探索CMSIS-RTOS RTX -- 同步与通信篇 -- 消息队列和邮箱处理 --(四)

&#x1f48c; 所属专栏&#xff1a;【BES2500x系列】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f49…