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);
})
相关推荐
凌晨一点的程序员10 分钟前
antd中的表格穿梭框(Transfer)如何使用
前端·javascript·html·react·antd·transfer
火柴盒zhang1 小时前
基于HTML CANVAS和EXCEL的xlsx文件展示工具websheet
前端·javascript·html·spreadsheet·websheet
一城烟雨_6 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
一纸忘忧7 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信8 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
软件技术NINI9 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
涵信9 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
codingandsleeping9 小时前
Express入门
javascript·后端·node.js
Vaclee9 小时前
JavaScript-基础语法
开发语言·javascript·ecmascript
拉不动的猪10 小时前
前端常见数组分析
前端·javascript·面试