【Vue】分页组件切换分页时未定位到最上面的位置

咸鱼妹妹

已于 2022-06-15 11:03:50 修改

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-06-14 11:05:05 首次发布

本文链接：https://blog.csdn.net/weixin_45884202/article/details/125274162

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

问题：table点击分页时候，在第一页把滚动条拉到最下面，切换到第2页或第3页，滚动条还是保留上一页的位置。
预期效果：切换分页时滚动条恢复到最上面的位置！！！

//分页标签
 <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="queryParams.pageNum"
    :page-sizes="pager.sizes"
    :page-size="queryParams.pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
 >
 </el-pagination>

//选择当前页码的触发事件
 handleCurrentChange(e) {
      console.log(e);
      this.queryParams.pageNum = e;
      this.getList();  //调用列表，刷新数据
      this.toTop();
 },
// 定义一个回到顶部的方法，然后在el-pagination组件的current-change事件里面调用就可以了。
 toTop(){
     var tBody = document.querySelector('.group-table');
     tBody.scrollTop = 0;
     // console.log(tBody.scrollTop)
 },

elementUI 表格el-table翻页后滚动条回到顶部