vue3 element plus table 滚动到指定位置

devtools/2024/9/25 23:22:34/

一. 需求

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

计算一下需要滚动的高度

表格自动滚动

二. 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/devtools/111500.html

相关文章

百度大模型构建智能问答系统技术实践

背景 随着大模型的飞速发展&#xff0c; AI 技术开始在更多场景中普及。在数据库运维领域&#xff0c;我们的目标是将专家系统和 AI 原生技术相融合&#xff0c;帮助数据库运维工程师高效获取数据库知识&#xff0c;并做出快速准确的运维决策。 传统的运维知识库系统主要采用…

【React】Vite 构建 React

项目搭建 vite 官网&#xff1a;Vite 跟着文档走即可&#xff0c;选择 react &#xff0c;然后 ts swc。 着重说一下 package-lock.json 这个文件有两个作用&#xff1a; 锁版本号&#xff08;保证项目在不同人手里安装的依赖都是相同的&#xff0c;解决版本冲突的问题&am…

利用TCP编程实现FTP功能

模拟FTP核心原理&#xff1a;客户端连接服务器后&#xff0c;向服务器发送一个文件。文件名可以通过参数指定&#xff0c;服务器端接收客户端传来的文件&#xff08;文件名随意&#xff09;&#xff0c;如果文件不存在自动创建文件&#xff0c;如果文件存在&#xff0c;那么清空…

【系统架构设计师】单例模式(Singleton Pattern)

单例模式详解 1. 什么是单例模式? 单例模式(Singleton Pattern)是一种创建型设计模式,它的目的是确保一个类只有一个实例,并且为整个系统提供一个全局访问点。换句话说,单例模式会限制类的实例化次数,使得在整个应用程序运行期间,类只有一个对象实例。无论何时何地访…

基于 SpringBoot摄影跟拍预定管理系统

专业团队&#xff0c;咨询送免费开题报告&#xff0c;大家可以来留言。 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上…

如何在Oracle中实现数据的加密

在Oracle数据库中实现数据加密是一项重要的安全措施&#xff0c;它可以保护存储在数据库中的敏感信息不被未授权访问。Oracle提供了多种数据加密方法&#xff0c;包括透明数据加密&#xff08;TDE&#xff09;、列级加密和使用内置加密函数等。以下是一些在Oracle中实现数据加密…

【RabbitMQ】RabbitMQ如何保证数据的可靠性,RabbitMQ如何保证数据不丢失,数据存储

【RabbitMQ】RabbitMQ如何保证数据的可靠性&#xff0c;RabbitMQ如何保证数据不丢失&#xff0c;数据存储 RabbitMQ通过一系列机制来确保数据&#xff08;即消息&#xff09;在传输和处理过程中不丢失。这些机制主要包括以下几个方面&#xff1a; 1. 消息持久化 持久化消息&a…

Apache Pulsar 与 Kafka Streams

Apache Pulsar 与 Kafka Streams 的比较与应用 Apache Pulsar 和 Kafka Streams 是两种广泛使用的数据流处理和消息队列技术。它们在构建实时数据流处理系统时发挥着重要作用&#xff0c;尽管两者的定位和用途略有不同。Apache Pulsar 是一个分布式的消息流平台&#xff0c;类…