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

 更新时间:2022年08月05日 15:18:10   作者:Jiang_JY  
这篇文章主要介绍了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));
      },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue3中如何使用动态组件

    详解Vue3中如何使用动态组件

    在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用,感兴趣的小伙伴可以了解下
    2024-01-01
  • 3分钟迅速学会Vue中methods方法使用技巧

    3分钟迅速学会Vue中methods方法使用技巧

    最近在学习Vue,感觉methods还是有必有总结一下的,下面这篇文章主要给大家介绍了关于3分钟迅速学会Vue中methods方法使用技巧的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue中el-date-picker限制选择7天内&禁止内框选择

    vue中el-date-picker限制选择7天内&禁止内框选择

    项目中需要选择时间范围,并且只能选择当前日期之后的七天,本文就来介绍了vue中el-date-picker限制选择7天内&禁止内框选择,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • vue-cli项目根据线上环境分别打出测试包和生产包

    vue-cli项目根据线上环境分别打出测试包和生产包

    这篇文章主要介绍了vue-cli项目根据线上环境打出测试包和生产包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 详解为element-ui的Select和Cascader添加弹层底部操作按钮

    详解为element-ui的Select和Cascader添加弹层底部操作按钮

    这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue源码学习之关于对Array的数据侦听实现

    Vue源码学习之关于对Array的数据侦听实现

    这篇文章主要介绍了Vue源码学习之关于对Array的数据侦听实现,Vue使用了一个方式来实现Array类型的监测就是拦截器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • vue实现手机端省市区区域选择

    vue实现手机端省市区区域选择

    这篇文章主要为大家详细介绍了vue实现手机端省市区区域选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue中实现回车键登录功能

    vue中实现回车键登录功能

    这篇文章主要介绍了vue中实现回车键登录功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue2 cube-ui时间选择器详解

    Vue2 cube-ui时间选择器详解

    这篇文章主要为大家介绍了Vue2 cube-ui时间选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue将props值实时传递 并可修改的操作

    Vue将props值实时传递 并可修改的操作

    这篇文章主要介绍了Vue将props值实时传递 并可修改的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论