vue使用elementUI分页如何实现切换页面时返回页面顶部
作者：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));
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。