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);
})
相关推荐
Mintopia44 分钟前
光影魔术师的秘密:用 JavaScript 打造软阴影的奇幻世界
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 粒子系统:让代码化身奇幻造梦师
前端·javascript·three.js
mpr0xy1 小时前
React Router 中 navigate 后浏览器返回按钮不起作用的问题记录
javascript·react.js·浏览器·路由
itwlz1 小时前
vite配置@别名,以及如何让IDE智能提示路经
开发语言·前端·javascript
lichenyang4531 小时前
添加按钮跳转页面并且根据网站的用户状态判断是否显示按钮
开发语言·前端·javascript
白云~️2 小时前
table表格合并,循环渲染样式
javascript·vue.js·elementui
Hilaku2 小时前
JavaScript 里的 !0、!1 到底是啥?聊聊那些压缩器最爱的“极简写法”
前端·javascript
全栈陈序员2 小时前
前端文件下载常用方式详解
前端·javascript·chrome·ajax·css3·html5·safari
前端小饭桌2 小时前
告别嵌套地狱:用数据结构优化解决 JS 多层循环的混乱与静默错误
前端·javascript
这可不简单2 小时前
方便易懂的自适应方案---echarts和dom样式大小自适应
前端·vue.js·echarts