快捷導(dǎo)航

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

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

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

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

原理

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

實(shí)現(xiàn)

<!-- 分頁(yè)組件 -->
<el-pagination
?@current-change="handleCurrentChange"
?>
</el-pagination>

//跳到頁(yè)頂
scrollTop(selector) {
? let element = selector && document.querySelector(selector) || window;
? element.scrollTo(0, 0);
},
handleCurrentChange(val) {
?? ?...
?? ?this.scrollTop()
}

element-ui分頁(yè)el-pagination的坑

1.所有的信息都必須的動(dòng)態(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: [],//返回的結(jié)果集合
totalDataNumber: 0,//數(shù)據(jù)的總數(shù),

3.這是重中之重，認(rèn)真我的認(rèn)證

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

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

? ? ?//改變頁(yè)碼
? ? ? handleCurrentChange(val){
? ? ? ? var pageSize=this.pageSize;
// ? ? ? ?this.pageNo=pageNo;
? ? ? ? console.log('pageSize:'+this.pageSize)
? ? ? ? this.getAndDraw(parseInt(pageNo),parseInt(pageSize));
? ? ? },

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

您可能感興趣的文章:

相關(guān)文章

Vue2利用Axios發(fā)起請(qǐng)求的詳細(xì)過程記錄
有很多時(shí)候你在構(gòu)建應(yīng)用時(shí)需要訪問一個(gè)API并展示其數(shù)據(jù),做這件事的方法有好幾種,而使用基于promise的HTTP客戶端axios則是其中非常流行的一種,這篇文章主要給大家介紹了關(guān)于Vue2利用Axios發(fā)起請(qǐng)求的詳細(xì)過程,需要的朋友可以參考下
2021-12-12
Vue面試題及Vue知識(shí)點(diǎn)整理
這篇文章主要介紹了Vue面試題及Vue知識(shí)點(diǎn)整理，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-10-10
Vue點(diǎn)擊切換顏色的方法
今天小編就為大家分享一篇Vue點(diǎn)擊切換顏色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
在Vue中實(shí)現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解（如熱力圖）
隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展，地圖熱點(diǎn)展示越來越受到人們的關(guān)注，在Vue應(yīng)用中，我們通常需要實(shí)現(xiàn)地圖熱點(diǎn)的展示和交互，以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果，本文將介紹在Vue中如何進(jìn)行地圖熱點(diǎn)展示與交互，包括熱力圖、點(diǎn)聚合等
2023-07-07
Vue3中關(guān)于ref和reactive的區(qū)別分析
這篇文章主要介紹了vue3關(guān)于ref和reactive的區(qū)別分析，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-06-06
談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系
本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
這篇文章主要為大家詳細(xì)介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
vue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享
今天小編就為大家?guī)硪黄獀ue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
springboot之springboot與netty整合方案
這篇文章主要介紹了VUE之關(guān)于store狀態(tài)管理核心解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue 購(gòu)物車案例練習(xí)
這篇文章主要給大家分享關(guān)于Vue 購(gòu)物車案例的小練習(xí)，文章個(gè)悲劇購(gòu)物車為標(biāo)題需求利用HTML代碼實(shí)現(xiàn)整個(gè)過程,需要的朋友可以參考一下文章的具體內(nèi)容
2021-10-10