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)文章

詳解Vue3中如何使用動(dòng)態(tài)組件
在?Vue?3?中,動(dòng)態(tài)組件是一種允許在運(yùn)行時(shí)動(dòng)態(tài)切換組件的機(jī)制,本文主要為大家詳細(xì)介紹了動(dòng)態(tài)組件在Vue3中的具體使用,感興趣的小伙伴可以了解下
2024-01-01
3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧
最近在學(xué)習(xí)Vue,感覺(jué)methods還是有必有總結(jié)一下的,下面這篇文章主要給大家介紹了關(guān)于3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇
項(xiàng)目中需要選擇時(shí)間范圍,并且只能選擇當(dāng)前日期之后的七天,本文就來(lái)介紹了vue中el-date-picker限制選擇7天內(nèi)&禁止內(nèi)框選擇,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
vue-cli項(xiàng)目根據(jù)線上環(huán)境分別打出測(cè)試包和生產(chǎn)包
這篇文章主要介紹了vue-cli項(xiàng)目根據(jù)線上環(huán)境打出測(cè)試包和生產(chǎn)包的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
Vue源碼學(xué)習(xí)之關(guān)于對(duì)Array的數(shù)據(jù)偵聽(tīng)實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼學(xué)習(xí)之關(guān)于對(duì)Array的數(shù)據(jù)偵聽(tīng)實(shí)現(xiàn)，Vue使用了一個(gè)方式來(lái)實(shí)現(xiàn)Array類型的監(jiān)測(cè)就是攔截器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-04-04
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue中實(shí)現(xiàn)回車鍵登錄功能
這篇文章主要介紹了vue中實(shí)現(xiàn)回車鍵登錄功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-02-02
Vue2 cube-ui時(shí)間選擇器詳解
這篇文章主要為大家介紹了Vue2 cube-ui時(shí)間選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
Vue將props值實(shí)時(shí)傳遞并可修改的操作
這篇文章主要介紹了Vue將props值實(shí)時(shí)傳遞并可修改的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08