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);
})
相关推荐
Alice-YUE30 分钟前
【js高频八股】防抖与节流
开发语言·前端·javascript·笔记·学习·ecmascript
是上好佳佳佳呀2 小时前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记
莎士比亚的文学花园2 小时前
Linux驱动开发(3)——设备树
开发语言·javascript·ecmascript
01漫游者3 小时前
JavaScript函数与对象增强知识
开发语言·javascript·ecmascript
threelab5 小时前
Three.js 代码云效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
yqcoder6 小时前
JavaScript 柯里化:把“大餐”拆成“小炒”的艺术
开发语言·javascript·ecmascript
每天吃饭的羊6 小时前
JSZip的使用
开发语言·javascript
前端老石人7 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
不可能的是7 小时前
从 /simplify 指令深挖 Claude Code 多 Agent 协同机制
javascript
Python私教7 小时前
Pure-Admin-Thin 深度解析:完整版和精简版到底怎么选?
vue.js·人工智能·开源