Element-plus点击当前行之后获取数据显示跟随行数据
要实现点击当前行后,在当前行的下方显示数据,可以通过以下步骤来实现:
- 在表格的行点击事件中获取当前点击行的位置信息。
- 根据位置信息动态计算并设置需要显示数据区域的位置。
下面是一个更新后的示例代码,演示如何在 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;
};
以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!
相关文章:
Element-plus点击当前行之后获取数据显示跟随行数据
要实现点击当前行后,在当前行的下方显示数据,可以通过以下步骤来实现: 在表格的行点击事件中获取当前点击行的位置信息。根据位置信息动态计算并设置需要显示数据区域的位置。 下面是一个更新后的示例代码,演示如何在 Element-P…...
Docker与微服务实战2022 尚
Docker与微服务实战2022 尚硅谷讲师:周阳 1. 基础篇(零基小白) 1 1.1. Docker简介 2 1.2. Docker安装 15 1.3. Docker常用命令 29 1.4. Docker镜像 43 1.5. 本地镜像发布到阿里云 50 1.6. 本地镜像发布到私有库 57 1.7. Docker容器数据卷 64 1.8. Docker常规安装简介 …...
Spring @Cacheable缓存注解用法说明
注解Cacheable 是 Spring 框架中用于缓存数据的方法或类的注解。通过使用这个注解,你可以避免重复计算和重复获取数据,从而提高应用程序的性能。 基本用法 引入依赖 确保在你的项目中引入了 Spring Cache 相关的依赖。如果你使用的是 Spring Boot&…...
Redis如何实现主从复制
Redis主从复制包括全量复制和增量复制。主是主服务器,从是从服务器,主服务器(master )的数据如果更新了也会同步到从服务器(slave),一个主服务器可以搭配很多个从服务器,主服务器负责写入,从服务器只能读取…...
正则表达式以及文本三剑客grep、sed、awk
正则表达式匹配的是文本内容,文本三剑客都是针对文本内容。 grep:过滤文本内容 sed:针对文本内容进行增删改查 awk:按行取列 一、grep grep的作用使用正则表达式来匹配文本内容 1、grep选项 -m:匹配几次之后停止…...
HSRP热备份路由协议(VRRP虚拟路由冗余协议)配置以及实现负载均衡
1、相关原理 在网络中,如果一台作为默认网关的三层交换机或者路由器损坏,所有使用该网关为下一跳的主机通信必然中断,即使配置多个默认网关,在不重启终端的情况下,也不能彻底换到新网关。Cisco提出了HSRP热备份路由协…...
不同集成学习算法的比较:随机森林、AdaBoost、XGBoost、LightGBM
好的,我来为您比较一些常见的集成学习算法,并生成表格形式以便于对比: 算法主要思想和特点应用场景并行处理支持稳定性和鲁棒性主要优化策略和技术AdaBoost使用加权投票组合多个弱分类器,逐步提升分类器性能二分类和多分类问题&a…...
【聊聊原子性,中断,以及nodejs中的具体示例】
什么是原子性 从一个例子说起, x ,读和写 , 如图假设多线程,线程1和线程2同时操作变量x,进行x的操作,那么由于写的过程中,都会先读一份x数据到cpu的寄存器中,所以这个时候cpu1 和 c…...
常见网络端口号
在网络工程领域,了解和掌握默认端口号是至关重要的。端口号是计算机网络中最基本的概念之 一,用于标识特定的网络服务或应用程序。 1、什么是端口号? 端口号是计算机网络中的一种标识,用于区分不同的网络服务和应用程序。每个端…...
【数值计算库-超长笔记】Python-Mpmath库:高精度数值计算
原文链接:https://www.cnblogs.com/aksoam/p/18279394 更多精彩,关注博客园主页,不断学习!不断进步! 我的主页 csdn很少看私信,有事请b站私信 博客园主页-发文字笔记-常用 有限元鹰的主页 内容…...
昇思25天学习打卡营第6天|函数式自动微分
函数式自动微分 相关前置知识复习 深度学习的重点之一是神经网络。而神经网络很重要的一环是反向传播算法,这个算法用于调整神经网络的权重。 反向传播算法 这里举例说明反向传播在做什么。 假设你是一个学生,一次考试过后,你收到了一份老…...
作业7.2
用结构体数组以及函数完成: 录入你要增加的几个学生,之后输出所有的学生信息 删除你要删除的第几个学生,并打印所有的学生信息 修改你要修改的第几个学生,并打印所有的学生信息 查找你要查找的第几个学生,并打印该的学生信息 1 /*…...
PCL 点云聚类(基于体素连通性)
文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里的思路很简单,我们通过将点云转换为体素,基于体素的连通性实现对点云的聚类(有点类似于欧式聚类),不过这种方式进行的聚类有些粗糙,但聚类速度相对会快很多,具体的实现效果可以详细阅读代码。 二、实现代…...
python自动化运维--DNS处理模块dnspython
1.dnspython介绍 dnspython是Pyhton实现的一个DNS工具包,他几乎支持所有的记录类型,可以用于查询、传输并动态更新ZONE信息,同事支持TSIG(事物签名)验证消息和EDNS0(扩展DNS)。在系统管理方面&a…...
成人职场商务英语学习柯桥外语学校|邮件中的“备注”用英语怎么说?
在英语中,"备注"通常可以翻译为"Notes" 或 "Remarks"。 这两个词在邮件中都很常用。例如: 1. Notes Notes: 是最通用和最常见的表达,可以用在各种情况下,例如: 提供有关电子邮件内容的附加信息 列…...
AndroidStudio报错macMissing essential plugin
电脑重启后打开studio: Missing essential plugin: org.jetbrains.android Please reinstall Android Studio from scratch. 无法使用 对应Mac下disabled_plugins.txt位于如下目录: /Users/ACB/Library/Application Support/Google/AndroidStudio4.2 …...
doris集群物理部署保姆级教程
doris物理安装 1、安装要求 Linux 操作系统版本需求 查看CentOs版本(>7.1) cat /etc/redhat-release 1)设置系统最大打开文件句柄数 vi /etc/security/limits.conf soft nofile 65536hard nofile 65536 echo ‘’’ soft nofile 655360hard nofile 655…...
探囊取物之多形式登录页面(基于BootStrap4)
基于BootStrap4的登录页面,支持手机验证码登录、账号密码登录、二维码登录、其它统一登录 低配置云服务器,首次加载速度较慢,请耐心等候;演练页面可点击查看源码 预览页面:http://www.daelui.com/#/tigerlair/saas/pr…...
【ONLYOFFICE】| 桌面编辑器从0-1使用初体验
目录 一. 🦁 写在前面二. 🦁 在线使用感受2.1 创建 ONLYOFFICE 账号2.2 编辑pdf文档2.3 pdf直接创建表格 三. 🦁 写在最后 一. 🦁 写在前面 所谓桌面编辑器就是一种用于编辑文本、图像、视频等多种自媒体的软件工具,具…...
20、PHP字符串的排列(含源码)
题目: PHP字符串的排列? 描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列。 例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba。 输入描述: 输入一个字符串,长度不超过9(可…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
