您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-24 369人已围观

简介 vue使用elementUI分页如何实现切换页面时返回页面顶部_vue.js_

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

原理

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

实现

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

element-ui分页el-pagination的坑

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

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

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

-六神源码网