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);
})
相关推荐
竹林8181 天前
从“连接失败”到丝滑登录:我用 ethers.js v6 搞定 MetaMask 钱包连接的全过程
前端·javascript
三原1 天前
超级好用的三原后台管理v1.0.0发布🎉(Vue3 + Ant Design Vue + Java Spring Boot )附源码
java·vue.js·开源
前端那点事1 天前
前端必看!JS高频实用案例(单行代码+实战场景+十大排序)
javascript
之歆1 天前
RBAC权限模型设计与实现深度解析
vue.js
前端Hardy1 天前
前端开发效率翻倍:15个超级实用的工具函数,直接复制进项目(建议收藏)
前端·javascript·面试
前端Hardy1 天前
Vue 项目必备:10 个高频实用自定义指令,直接复制即用(Vue2 / Vue3 通用)
前端·javascript·vue.js
h_jQuery1 天前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app
懒大王95271 天前
Vue 2 与 Vue 3 的区别
前端·javascript·vue.js
xuankuxiaoyao1 天前
vue.js 实践--侦听器和样式绑定
前端·javascript·vue.js
AIBox3651 天前
openclaw api 配置教程,支持 Claude、Gemini、GPT5.4 等模型
javascript·人工智能·gpt