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