vue使用elementUI分頁如何實現(xiàn)切換頁面時返回頁面頂部

更新時間：2022年08月05日 15:18:10 作者：Jiang_JY

這篇文章主要介紹了vue使用elementUI分頁如何實現(xiàn)切換頁面時返回頁面頂部，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用elementUI分頁實現(xiàn)切換頁面時返回頁面頂部

原理

給elementUI分頁組件的切換頁面時觸發(fā)事件（在這里就是handleCurrentChange函數(shù)）添加一個跳轉到頁頂?shù)姆椒纯伞?/p>

實現(xiàn)

<!-- 分頁組件 -->
<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.所有的信息都必須的動態(tài)的

<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.數(shù)據(jù)在data里面

pageNo: 1,
pageSize: 10,
pageSizesList: [10, 15, 20, 30, 50],
tableData: [],//返回的結果集合
totalDataNumber: 0,//數(shù)據(jù)的總數(shù),

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

//改變每頁顯示數(shù)量
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));
? ? ? },

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: