1、前言
??通過封裝el-pagination組件開發自定義分頁組件的類似文章網上已經有很多了，但看了一圈，總是不如意，于是決定還是自己動手搞一個，
2、背景
2.1、常規分頁處理方法
??利用el-pagination組件的常規做法如下：
??模板部分：
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange" :current-page="pageInfo.pagenum"
:page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
background>
</el-pagination>
??腳本部分：
export default {
data() {
return {
formData : {
//查詢資訊
queryInfo:{
userType : 0,
deleteFlag: 2, //表示所有型別
pagenum : 1,
pagesize : 10
},
// 用戶型別選擇框當前選中顯示標簽值
userTypeLabel : "所有型別",
// 用戶狀態選擇框當前選中顯示標簽值
userStatusLabel : "所有型別"
},
// 分頁資訊
pageInfo:{
pagenum : 1,
pagesize : 10,
total : 0
}
}
},
methods: {
// 查詢用戶資訊串列
queryUsers(){
let _this = this;
//console.log(this.pageInfo);
this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
this.formData.queryInfo.pagesize = this.pageInfo.pagesize;
this.instance.queryUsers(
this.$baseUrl,this.formData.queryInfo
).then(res => {
//console.log(res.data);
if (res.data.code == this.global.SucessRequstCode){
//如果查詢成功
_this.pageInfo.total = res.data.data.length;
_this.userInfoList = res.data.data;
}else{
alert(res.data.message);
}
}).catch(error => {
alert('查詢失敗！');
console.log(error);
});
},
// 每頁條數改變
handleSizeChange(newSize) {
this.pageInfo.pagesize = newSize;
this.queryUsers();
},
// 當前頁碼改變
handleCurrentChange(newPage) {
this.pageInfo.pagenum = newPage;
this.queryUsers();
}
}
2.2、問題分析
??每個分頁查詢，都需要這么來一套，有點簡單重復，又略有不同，即查詢資料的方法會不同，
??對于有強迫癥的程式猿來說，簡單重復的代碼無疑非常令人不爽，因此，需要將之組件化，
??分析el-pagination分頁組件：
- 有三個核心屬性引數，分別是：當前頁碼（current-page）、每頁條數（page-size）、總記錄條數（total），核心屬性引數通過系結父組件頁面資料，實行雙向聯動，其中當前頁碼和每頁條數一般通過操作分頁子組件來改變，總記錄條數通過查詢資料后由父組件進行設定，
- 有兩個事件：分別是：@size-change（每頁條數改變事件）、@current-change（當前頁碼改變事件），這兩個事件，分別系結父組件的對應事件處理方法handleSizeChange和handleCurrentChange，兩者均呼叫查詢資料的方法，查詢資料的方法中，得到結果集后，設定總記錄條數，
??自定義分頁組件的開發目標：消除父組件的handleSizeChange和handleCurrentChange的系結事件方法，
??思路：使用v-model系結分頁資訊物件，分頁資訊物件包括3個核心屬性引數，即上述的pageInfo，然后分頁事件直接系結查詢資料的方法，
3、方案實施
3.1、自定義分頁組件
??撰寫一個自定義分頁組件代碼，檔案為/src/Pagination.vue，代碼如下：
<template lang="html">
<div >
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageInfo.pagenum"
:page-size="pageInfo.pagesize"
:page-sizes="pageSizes"
:total="pageInfo.total"
layout="total, sizes, prev, pager, next, jumper"
background >
</el-pagination>
</div>
</template>
<script>
export default {
name : "pagination",
model : {
prop : 'pageInfo',
event : 'change'
},
props : {
// 每頁條數選擇項
pageSizes: {
type: Array,
default() {
return [5, 10, 15, 20];
}
},
// v-model系結的資料物件
pageInfo: {
type: Object,
reuqired:true
}
},
data(){
return {
}
},
methods: {
handleSizeChange(newSize) {
var newValue=https://www.cnblogs.com/alabo1999/p/{
pagesize : newSize,
pagenum : newSize <= this.total ? 1 : this.pageInfo['pagenum']
};
this.$emit('change',Object.assign(this.pageInfo,newValue));
this.$emit('pagination');
},
handleCurrentChange(newPage) {
this.$emit('change',Object.assign(this.pageInfo,{pagenum : newPage}));
this.$emit('pagination');
}
}
}
</script>
<style lang="css" scoped>
.pagination {
padding: 10px 0;
text-align: center;
}
</style>
??自定義分頁組件，名稱為pagination，其使用v-model，實作雙向資料通信，當頁碼或每頁條數改變時，觸發分頁事件@pagination，提供與父組件方法系結，
??此處約定了pageInfo的欄位結構如下：
pageInfo:{
pagenum : 1, //Number
pagesize : 10, //Number
total : 0 //Number
}
??父組件必須提供相同結構的資料物件來系結組件內部的pageInfo物件，
3.2、注冊分頁組件
??然后注冊此分頁組件，在main.js中加入下列代碼：
import pagination from '@/components/Pagination.vue'
// 注冊分頁插件
Vue.component('pagination', pagination)
3.3、父組件呼叫方法
??用pagination組件修改前面第二章的代碼，
??模板部分：
<!-- 分頁區域 -->
<pagination v-model="pageInfo" @pagination="queryUsers"></pagination>
??腳本部分：
export default {
data() {
return {
formData : {
//查詢資訊
queryInfo:{
userType : 0,
deleteFlag: 2, //表示所有型別
pagenum : 1,
pagesize : 10
},
// 用戶型別選擇框當前選中顯示標簽值
userTypeLabel : "所有型別",
// 用戶狀態選擇框當前選中顯示標簽值
userStatusLabel : "所有型別"
},
// 分頁資訊
pageInfo:{
pagenum : 1,
pagesize : 10,
total : 0
}
}
},
methods: {
// 查詢用戶資訊串列
queryUsers(){
let _this = this;
//console.log(this.pageInfo);
this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
this.formData.queryInfo.pagesize = this.pageInfo.pagesize;
this.instance.queryUsers(
this.$baseUrl,this.formData.queryInfo
).then(res => {
//console.log(res.data);
if (res.data.code == this.global.SucessRequstCode){
//如果查詢成功
_this.pageInfo.total = res.data.data.length;
_this.userInfoList = res.data.data;
}else{
alert(res.data.message);
}
}).catch(error => {
alert('查詢失敗！');
console.log(error);
});
}
}
??這樣，就去掉了handleSizeChange和handleCurrentChange事件回應方法了，分頁資訊發生改變時，觸發系結的queryUsers方法，
??另外，如需調整pageSizes，則在模板處類似如下設定：
:pageSizes=[10,20,30,50,100]
4、參考文章
??此組件開發主要參考了下列文章：
- Vue+el-pagination二次封裝，https://blog.csdn.net/weixin_47259997/article/details/107887823，
- vue專案 使用elementui中的el-pagination封裝公用分頁組件，https://www.jianshu.com/p/e241e5710fb0/，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288988.html
標籤：JavaScript
上一篇：CSS之特指度和層疊