vue elementUI中 el-table 如何在切换页码让滚动条回到顶部或底部

一只酸奶-刘

于 2024-07-21 13:23:50 发布

阅读量191

点赞数 4

分类专栏： ElementUI 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_58586234/article/details/140586944

版权

ElementUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题描述：

使用el-table显示数据，当滚动到最底部，再点击切换分页时，回显过来数据后，滚动条依然在页面底部

解决方法：

给el-table上加入ref="table"再使用下面的方法就可以实现

//滚动到顶部
this.$refs.table.bodyWrapper.scrollTop = 0 
//滚动到底部
this.$refs.table.bodyWrapper.scrollTop = this.$refs.table.bodyWrapper.scrollHeight

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只酸奶-刘

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue elementUI中 el-table 如何在切换页码让滚动条回到顶部或底部

使用el-table显示数据，当滚动到最底部，再点击切换分页时，回显过来数据后，滚动条依然在页面底部。
复制链接

扫一扫

专栏目录

表格翻页或切换页容量时，滚动条回到顶部

qq_43437571的博客

10-08

692

表格翻页或切换页容量时，滚动条回到顶部

element-ui table 点击分页table滚到顶部

weixin_45561965的博客

04-19

468

使用table表格的时候，切换分页之后不会回到顶部，还是停留在之前滚动的位置。//切换分页的方法加上下面这句，table就能自动滚到顶部。设置table的 ref=‘multipleTable’在开发项目过程中遇到这样一个问题。看到这如果帮到你了留个小心心吧。

参与评论您还未登录，请先登录后发表或查看评论

【Element-plus】el-table新增数据后自动滚到表格的底部或顶部

最新发布

weixin_40057665的博客

06-19

325

【代码】【Element-plus】如何让滚动条永远在最底部。

el-table滚动条返回最顶端

weixin_43130016的博客

08-18

1527

滚动条返回最顶端

el-table 滚动轴固定到底部

weixin_42234899的博客

10-24

1534

el-table 滚动轴固定到底部

el-table-infinite-scroll:El-Table无限滚动

05-26

element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

10-17

在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。首先，ElementUI的`el-table`组件通常通过`<el-table-...

vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

08-28

在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

10-17

在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下

vue2.0 + element UI 中 el-table 数据导出Excel的方法

08-27

Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法以下是对 Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法的详细解释： 1. 安装相关依赖在使用 Vue2.0 + Element UI 中 el-table 数据导出 ...

element 表格scroll_vue + elementUI 框架下给el-table 增加一条数据，默认滚动条定位到表格的最底部...

weixin_39959335的博客

12-22

957

最近做项目的时候有个需求--需要给表格增加数据，然后数据多的情况下表格会出现滚动条，需要默认定位到表格的底部。效果图：一般的js的做法是：let table = document.getElementById('id名字');table.scrollTop = table.scrollHeight;因为用到了elementUi框架，不容易获取到表格里面的某个元素的id，所以上面方法不是很适用，查...

element table滚动到底部加载数据(vue3)

qq_46131497的博客

11-29

645

【代码】element table滚动到底部加载数据(vue3)

vue elementui中使表的滚动条 滚到顶部或底部

u012970538的博客

09-14

2488

1.设置table的ref为tableList。

el-table 横向滚动条固定在可视窗口底部

热门推荐

ZMJ_QQ的博客

04-21

3万+

有一个需求,当el-table的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。...

Vue自定义指令监听el-table的滚动事件，滚动到底部加载更多数据

林中明月间丶

09-26

8051

Vue自定义指令监听el-table的滚动事件，达到滚动条滚动到底部加载新数据

elementUI el-table 默认滚动条在表格的最底部

grootbaby

11-07

3308

elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注：需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。

element ui table 滚动条回到顶部、底部

zhanglianglily的博客

01-09

8956

element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题；滚动到第一行： this.$refs.table.bodyWrapper.scrollTop =0; 滚动到最后一行： this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight; ------------...

el-table点击分页自动跳至表格顶部

mxh_CSDN的博客

03-29

1579

1、给el-table添加ref属性 <el-table :data="tableData" border size="mini" height="100%" highlight-current-row ref="multipleTable" > 2、在分页的方法里加上this.$refs["multipleTable"].bodyWrapper.scrollTop=0 ； // 分页--分页大小改变事件 h...

前端vue elementui中el-input只能输入数字

05-27

如果你想让 `el-input` 中只能输入数字，可以添加 `type="number"` 属性。示例代码如下： ```html <el-input type="number" v-model="num"></el-input> ``` 这样，用户在输入框中只能输入数字，如果输入非数字字符，输入框会自动清空。如果你需要限制输入的数字范围，可以使用 `min` 和 `max` 属性。例如，限制输入的数字在 1 到 100 之间： ```html <el-input type="number" v-model="num" :min="1" :max="100"></el-input> ``` 这样，用户在输入框中只能输入 1 到 100 之间的数字，超出范围的数字会被自动清空。