温馨提示×

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

发布时间:2022-08-05 17:36:10 来源:亿速云 阅读:50 作者:iii 栏目:开发技术

这篇文章主要讲解了“vue怎么使用elementUI分页实现切换页面时返回页面顶部”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么使用elementUI分页实现切换页面时返回页面顶部”吧!

使用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));
      },

感谢各位的阅读,以上就是“vue怎么使用elementUI分页实现切换页面时返回页面顶部”的内容了,经过本文的学习后,相信大家对vue怎么使用elementUI分页实现切换页面时返回页面顶部这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:[置顶]       jquery返回页面顶部

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

主题地图