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);
})
相关推荐
晴殇i几秒前
抛弃 JavaScript 立即执行函数,这个方案更简洁更优雅
前端·javascript
zoahxmy09292 分钟前
Vue3 视频播放与截图功能实现
javascript·vue.js
waylon111136 分钟前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
DJA_CR8 分钟前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风0123424 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
旧味清欢|29 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据2 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式