如何让Vue使用ElementUI分页在切换页面时自动滚动到页面顶部？

本文共计514个文字，预计阅读时间需要3分钟。

目录 + 使用 ElementUI 分页实现页面切换时返回页面顶部 + 原理解析 + 实现 + Element-ui 分页组件教程

1.所有信息都必须动态的

2.数据存储在 data 中

3.这是双重之重，真诚地我的认证 + 使用 ElementUI 分页

目录

• 使用elementUI分页实现切换页面时返回页面顶部
• 原理
• 实现
• element-ui分页el-pagination的坑
• 1.所有的信息都必须的动态的
• 2.数据在data里面
• 3.这是重中之重，认真我的认证

使用elementUI分页实现切换页面时返回页面顶部

原理

给elementUI分页组件的切换页面时触发事件（在这里就是handleCurrentChange函数）添加一个跳转到页顶的方法即可。

实现

<!-- 分页组件 --> <el-pagination  @current-change="handleCurrentChange"  > </el-pagination>

//跳到页顶 scrollTop(selector) {   let element = selector && document.querySelector(selector) || window;   element.scrollTo(0, 0); }, handleCurrentChange(val) {     ...     this.scrollTop() }

element-ui分页el-pagination的坑

1.所有的信息都必须的动态的

<el-pagination   class="pull-right clearfix"   @size-change="handleSizeChange"   @current-change="handleCurrentChange"   :current-page.sync="pageNo"   :page-sizes="pageSizesList"   :page-size="pageSize"   layout="total, sizes, prev, pager, next, jumper"   :total="totalDataNumber"> </el-pagination>

2.数据在data里面

pageNo: 1, pageSize: 10, pageSizesList: [10, 15, 20, 30, 50], tableData: [],//返回的结果集合 totalDataNumber: 0,//数据的总数,

3.这是重中之重，认真我的认证

this.$http({   method: 'POST',   url: '/api/Acs/QueryAccessLog',   data: requestData }).then(function (resp) {   console.log(resp);   if (resp.data.Data.Result.length > 0) {     likeThis.tableData = resp.data.Data.Result;     likeThis.totalDataNumber = resp.data.Data.Total;     likeThis.listLoading=false;   } else {     likeThis.tableData = [];     likeThis.totalDataNumber = 0;   } })

//改变每页显示数量 handleSizeChange(val){   var likeThis=this;   var pageSize = `${val}`;   this.pageNo=1   this.pageSize= parseInt(pageSize);   console.log('pageSize: '+pageSize);   this.$nextTick(() =>     this.getAndDraw(1,pageSize,function (resp) {       likeThis.totalDataNumber = resp.data.Data.Total;     })   ) },

     //改变页码       handleCurrentChange(val){         var pageSize=this.pageSize; //        this.pageNo=pageNo;         console.log('pageSize:'+this.pageSize)         this.getAndDraw(parseInt(pageNo),parseInt(pageSize));       },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。