这篇文章主要讲解了“vue怎么使用elementUI分页实现切换页面时返回页面顶部”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么使用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()
}<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>pageNo: 1,
pageSize: 10,
pageSizesList: [10, 15, 20, 30, 50],
tableData: [],//返回的结果集合
totalDataNumber: 0,//数据的总数,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分页实现切换页面时返回页面顶部这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
