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);
})
相关推荐
还不秃顶的计科生26 分钟前
defaultdict讲解
开发语言·javascript·ecmascript
花归去31 分钟前
echarts 柱状图包含右侧进度
开发语言·前端·javascript
计算机毕设VX:Fegn089536 分钟前
计算机毕业设计|基于springboot + vue在线音乐播放系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
计算机毕设VX:Fegn089540 分钟前
计算机毕业设计|基于springboot + vue博物馆展览与服务一体化系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
沐浴露z42 分钟前
学习通“只能录入不能粘贴” 解决方案与原理分析
javascript
Sapphire~1 小时前
Vue3-03 熟悉src文件夹及Vue文件格式
前端·javascript·vue.js
用户841794814561 小时前
vxe-table 复制单元格内容总会在最后加个换行符,如何去掉末尾换行符的解决方法
vue.js
ChangYan.1 小时前
Electron使用ffi-napi报错External buffers are not allowed解决办法
前端·javascript·electron
阿民_armin1 小时前
移动端长列表「返回原位置」的完整实践
前端·javascript·vue.js
Arnbit1on1 小时前
使用docxtemplater进行Word文档的自动填充
javascript