vue3 element plus table 滚动到指定位置

一. 需求

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

计算一下需要滚动的高度

表格自动滚动

二. code

1. 给table加上ref

html 复制代码
<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 = true
    await xxApi({}).then((res) => {xxx})
}

nextTick(async () => {
    await getTableData()
    const rowIndex = tableData.value.findIndex(item => { return item.changeColor == true })
    const yScroll = 36 * rowIndex
    tableRef.value.setScrollTop(yScroll);
})
相关推荐
不磕了还不行6 分钟前
用 Vue + Element UI 把元宝搜索的返回值做成“能点开检查的证据卡片”
前端·vue.js·ui
FRing0311 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿11 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
速易达网络14 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
徐小夕14 小时前
深度剖析 30k star 的编码 Agent DeepSeek-Reasonix:长会话 Token 成本直降 80%
前端·vue.js·github
paopaokaka_luck14 小时前
灾害应急物资管理系统(AI应急助手、Echarts可视化数据看板、捐赠入库联动、 物资全流程管理、库存变动追溯、灾情资讯与互动反馈、物资发放公示)
java·前端·javascript·spring boot·mysql·tomcat·echarts
kyriewen14 小时前
我验了 7 种 sticky 失效说法:3 种根本不成立
前端·javascript·程序员
我命由我1234516 小时前
Python 实用操作 - 文件操作(打开与关闭文件、读取文件、文件写入)
java·开发语言·前端·javascript·数据库·python·java-ee
Momo__16 小时前
你写的 import 重试,从来没生效过
前端·javascript·typescript
ruanno_top16 小时前
1 万行表格只渲染 18 行:虚拟滚动让我放弃了三个功能
vue.js