使用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));
},
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。