vue實現(xiàn)分頁功能
更新時間：2021年08月31日 14:50:34 作者：waillyer
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)分頁功能的具體代碼，供大家參考，具體內(nèi)容如下
- 使用組件分頁
- 自己寫分頁
一、組件分頁
<el-pagination
layout="prev, pager, next"
@current-change="changePageNum"
:current-page="pageNum"
:page-size="pageSize"
:total="total">
</el-pagination>
data（）{
return{
tableData: [],
total: 0,//總數(shù)
pageNum: 1,//當(dāng)前頁
pageSize: 15,//每頁顯示數(shù)量
}
}
mounted: function () {
this.query();//加載頁面時，獲取數(shù)據(jù)
},
methods:{
//切換頁碼
changePageNum: function (val) {
this.pageNum = val;
this.query();
},
//通過接口，獲取數(shù)據(jù)
query: function () {
var data = {
name: this.name || '',
fleetId: this.FleetId,
pageNum: this.pageNum,//當(dāng)前頁
pageSize: this.pageSize//查詢個數(shù)
};
RoleManage.getRole(data)
.then(res => {
var data = res;
if (res.success) {
this.tableData = data.obj.list;
this.total = data.obj.total;
this.name ='';
} else {
this.$message('查詢失敗');
}
}).catch(err => {
// 異常情況
console.log(err);
});
},
}
組件分頁效果
二、自己構(gòu)建分頁
有些時候需要根據(jù)需求自己寫分頁
1、分頁樣式
2、上下切頁
//調(diào)度-系統(tǒng)通訊錄分頁
dispatchCourentPage: 1,
//調(diào)度-系統(tǒng)通訊錄當(dāng)前選中標(biāo)簽標(biāo)記
dispatchCourentIndex: 1,
//調(diào)度-系統(tǒng)通訊錄更多標(biāo)記項:組id
dispatchMorecommandGroupId: '',
dispatchTotlePage: 0,
//上頁
handleLastPage() {
if (this.dispatchCourentPage === 1) return;
this.dispatchCourentPage -= 1;
let index = this.dispatchCourentIndex;
if (this.dispatchMorecommandGroupId != '') {
this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
} else {
this.queryBookmember(index);
}
},
//下頁
handleNextPage() {
if (this.dispatchCourentPage === this.dispatchTotlePage) return;
this.dispatchCourentPage += 1;
let index = this.dispatchCourentIndex;
if (this.dispatchMorecommandGroupId != '') {
this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
} else {
this.queryBookmember(index);
}
}
三、使用監(jiān)聽屬性控制分頁顯示
computed: {
limitData() {
let data = [...this.table1Datas];
return data;
},
// 因為要動態(tài)計算總頁數(shù)，所以還需要一個計算屬性來返回最終給 Table 的 data
dataWithPage() {
const data = this.limitData;
const start = this.current * this.size - this.size;
const end = start + this.size;
return [...data].slice(start, end);
},
}
四、js控制分頁，計算總頁數(shù)
方法1
/**
*根據(jù)數(shù)據(jù)條數(shù)與每頁多少條數(shù)據(jù)計算頁數(shù)
* totalnum 數(shù)據(jù)條數(shù)
* limit 每頁多少條
*/
pageCount(totalnum, limit) {
return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit)
? (parseInt(totalnum / limit) + 1)
: (totalnum / limit))) : 0;
},
方法2
/**
* 分頁的總頁數(shù)算法
* 總記錄數(shù)：totalRecord
* 每頁最大記錄數(shù)：maxResult
*/
function pageCount() {
totalPage = (totalRecord + maxResult -1) / maxResult;
}
方法3 推薦
totalPage = Math.floor((totalRecord +maxResult -1) /maxResult );
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?$emit用法指南(含選項API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue3在history模式下如何通過vite打包部署白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
最近工作上經(jīng)常操作數(shù)組數(shù)據(jù),并且要求實時更新視圖數(shù)據(jù),這個時候首先想到的是?vue.set(),下面這篇文章主要給大家介紹了關(guān)于vue中this.$set()的基本用法實例,需要的朋友可以參考下2023-01-01
Vue使用electron轉(zhuǎn)換項目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue中window.onresize的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
el-table實現(xiàn)給每行添加loading效果案例
這篇文章主要介紹了el-table實現(xiàn)給每行添加loading效果案例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
swiper是我之前做前端頁面會用到的一個插件,我自己認(rèn)為是非常好用的。這篇文章給大家介紹vue-swiper的使用教程，感興趣的朋友一起看看吧2018-08-08
Vue中select下拉框的默認(rèn)選中項的三種情況解讀
這篇文章主要介紹了Vue中select下拉框的默認(rèn)選中項的三種情況解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文介紹了如何使用html2canvas庫來實現(xiàn)HTML頁面或某個元素的截圖功能,文中通過代碼介紹的非常詳細(xì),需要注意的是此方法只能在瀏覽器環(huán)境中使用,需要的朋友可以參考下2024-10-10