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);
})
相关推荐
java1234_小锋26 分钟前
Vue3+Vite简介以及构建第一个HelloWorld实例
前端·javascript·vue.js·vite
天天鸭2 小时前
5 万处中文的老项目实现国际化,如何用架构思维完成改造?
前端·javascript·架构
西门啐血2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
观察员3 小时前
Vue3 猜字游戏前端实战:从零搭建聊天交互界面
vue.js
月月大王的3D日记3 小时前
Three.js 入门系列(7):让甜甜圈围着我转 —— 3D文字生成
前端·javascript
only-lucky5 小时前
QML深入学习五(Controls模块)
前端·javascript·学习
其美杰布-富贵-李6 小时前
第 5 篇:Object3D、Group 与场景树
javascript·three.js
海带紫菜菠萝汤6 小时前
H.264 宏块划分与码率分配机制:影响压缩效率的关键参数详解
前端·javascript·音视频
春波petal7 小时前
Vue3防抖搜索:从Lodash到customRef全解析
vue.js·vue3·防抖搜索
达子6668 小时前
第22章_HarmonyOs开发图解之 蓝牙
vue.js