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);
})
相关推荐
诸葛亮的芭蕉扇1 小时前
抓图巡检-底图支持绘制
开发语言·前端·javascript
熊猫比分站1 小时前
让电竞数据实时跳动:Spring Boot 后端 + Vue 前端的完美融合实践
前端·vue.js·spring boot
一 乐2 小时前
健康打卡|健康管理|基于java+vue+的学生健康打卡系统设计与实现(源码+数据库+文档)
android·java·数据库·vue.js·spring boot·微信小程序
木子李BLOG2 小时前
Element Plus
前端·javascript·vue.js
Miketutu2 小时前
【大屏优化秘籍】Element UI El-Table 表格透明化与自定义行样式实战
前端·javascript·vue.js
止水编程 water_proof2 小时前
JavaScript基础
开发语言·javascript·ecmascript
少卿4 小时前
React Compiler 完全指南:自动化性能优化的未来
前端·javascript
快起来搬砖了4 小时前
Vue 实现阿里云 OSS 视频分片上传:安全实战与完整方案
vue.js·安全·阿里云
爱隐身的官人4 小时前
beef-xss hook.js访问失败500错误
javascript·xss
军军3604 小时前
从图片到点阵:用JavaScript重现复古数码点阵艺术图
前端·javascript