vue3 element plus table 滚动到指定位置

server/2024/9/25 18:36:36/

一. 需求

页面表格数据加载完成之后

计算一下需要滚动的高度

表格自动滚动

二. code

1. 给table加上ref

<el-table ref="tableRef" :data="tableData">...</el-table>

2. 使用nextTick在表格渲染完之后计算高度滚动

javascript">import { ref, nextTick } from 'vue'const tableRefRanking = ref(null);
const tableData = ref([])const getTableData = async () => {isLoading.value = trueawait xxApi({}).then((res) => {xxx})
}nextTick(async () => {await getTableData()const rowIndex = tableData.value.findIndex(item => { return item.changeColor == true })const yScroll = 36 * rowIndextableRef.value.setScrollTop(yScroll);
})

 


http://www.ppmy.cn/server/116792.html

相关文章

直流电源纹波怎么测量?示波器的探头和带宽如何选择?

对于电源工程师来说&#xff0c;精确测量电源纹波是一项基本技能。本文将详细介绍直流电源纹波测试时的注意事项&#xff0c;包括示波器探头的选择、带宽设置、时基选择&#xff0c;确保精准测量直流电源纹波。 一、选择合适的示波器带宽 为了避免电路的高频噪声影响电源纹波的…

加密与安全_ sm-crypto 国密算法sm2、sm3和sm4的Java库

文章目录 Presm-crypto如何使用如何引入依赖 sm2获取密钥对加密解密签名验签获取椭圆曲线点 sm3sm4加密解密 Pre 加密与安全_三种方式实现基于国密非对称加密算法的加解密和签名验签 sm-crypto https://github.com/antherd/sm-crypto 国密算法sm2、sm3和sm4的java版。基于js…

Java重修笔记 第五十五天 坦克大战(五)多线程基础

线程常用方法 1. 设置线程的名称 public final void setName(String name) 参数&#xff1a;name - 这个线程的新名称 2. 得到线程的名称 public final String getName() 返回值&#xff1a;线程的名称 3. 创建线程 public void start() Java 虚拟机底层调用 start0 方法创…

【三】TDengine 3.3.2 生产级别集群搭建

TDengine 3.3.2 集群搭建 集群规划 一、主机名和端口规划 修改主机信息&#xff1a;修改hosts信息&#xff0c;TDEngine是通过FQDN进行访问&#xff0c; 规划好三个节点对应的hostname。 vi /etc/hosts 追加以下信息 192.168.90.131 node1 192.168.90.132 node2 192.168.90.133…

HTTP 协议介绍

基本介绍&#xff1a; HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff1a; 全称超文本传输协议&#xff0c;是用于从万维网&#xff08;WWW:World Wide Web &#xff09;服务器传输超文本到本地浏览器的传送协议。 HTTP 是一种应用层协议&#xff0c;是基…

用于全文RSS服务的Full-Text-RSS

什么是 Full-Text-RSS &#xff1f; Full-Text-RSS 能轻松从网页或仅摘要的 RSS 提要中提取完整的文章内容。 是 fivefilters 全文 RSS 服务的非官方 Docker 镜像。 从功能上来说&#xff0c;和老苏之前介绍过的 Morss很 类似 文章传送门&#xff1a;用Morss获取全文RSS摘要 安…

Autosar(Davinci) --- 创建一个S/R类型的port(下)

前言: 前面章节我们讲解了S/R类型的Port如何创建,这一章节,我们着重讲一下生成的代码,以及我们如何添加代码让这些门与灯之间的关系产生连接。 一、CtSaDoor.c 在【Rte.c】的【IO_TASK】中我们可以看到,反复的判断Rte_Ev_Cyclic_IO_Task_0_200ms这个条件是否成立,当200…

JUnit 5 详解

JUnit 5 详解 JUnit 是 Java 生态系统中最流行的测试框架之一&#xff0c;用于编写单元测试、集成测试等。JUnit 5 是其最新版本&#xff0c;提供了更多功能和灵活性&#xff0c;旨在提高测试的可读性、可维护性和可扩展性。JUnit 5 在设计上有别于之前的版本&#xff0c;并引…