Vue使用v-model封裝el-pagination組件的全過程
使用v-model綁定分頁信息對象，分頁信息對象包括3個核心屬性參數(shù)，分頁事件直接綁定查詢數(shù)據(jù)的方法，消除父組件的handleSizeChange和handleCurrentChange的綁定事件方法。
1、前言
通過封裝el-pagination組件開發(fā)自定義分頁組件的類似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動手搞一個。
2、背景
2.1、常規(guī)分頁處理方法
利用el-pagination組件的常規(guī)做法如下：
模板部分：
<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
},
// 用戶類型選擇框當(dāng)前選中顯示標(biāo)簽值
userTypeLabel : "所有類型",
// 用戶狀態(tài)選擇框當(dāng)前選中顯示標(biāo)簽值
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);
});
},
// 每頁條數(shù)改變
handleSizeChange(newSize) {
this.pageInfo.pagesize = newSize;
this.queryUsers();
},
// 當(dāng)前頁碼改變
handleCurrentChange(newPage) {
this.pageInfo.pagenum = newPage;
this.queryUsers();
}
}
2.2、問題分析
每個分頁查詢，都需要這么來一套，有點簡單重復(fù)，又略有不同，即查詢數(shù)據(jù)的方法會不同。
對于有強迫癥的程序猿來說，簡單重復(fù)的代碼無疑非常令人不爽。因此，需要將之組件化。
分析el-pagination分頁組件：
- 有三個核心屬性參數(shù)，分別是：當(dāng)前頁碼（current-page）、每頁條數(shù)（page-size）、總記錄條數(shù)（total）。核心屬性參數(shù)通過綁定父組件頁面數(shù)據(jù)，實行雙向聯(lián)動。其中當(dāng)前頁碼和每頁條數(shù)一般通過操作分頁子組件來改變，總記錄條數(shù)通過查詢數(shù)據(jù)后由父組件進(jìn)行設(shè)置。
- 有兩個事件：分別是：@size-change（每頁條數(shù)改變事件）、@current-change（當(dāng)前頁碼改變事件）。這兩個事件，分別綁定父組件的對應(yīng)事件處理方法handleSizeChange和handleCurrentChange，兩者均調(diào)用查詢數(shù)據(jù)的方法，查詢數(shù)據(jù)的方法中，得到結(jié)果集后，設(shè)置總記錄條數(shù)。
自定義分頁組件的開發(fā)目標(biāo)：消除父組件的handleSizeChange和handleCurrentChange的綁定事件方法。
思路：使用v-model綁定分頁信息對象，分頁信息對象包括3個核心屬性參數(shù)，即上述的pageInfo。然后分頁事件直接綁定查詢數(shù)據(jù)的方法。
3、方案實施
3.1、自定義分頁組件
編寫一個自定義分頁組件代碼，文件為/src/Pagination.vue。代碼如下：
<template lang="html">
<div class="pagination">
<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 : {
// 每頁條數(shù)選擇項
pageSizes: {
type: Array,
default() {
return [5, 10, 15, 20];
}
},
// v-model綁定的數(shù)據(jù)對象
pageInfo: {
type: Object,
reuqired:true
}
},
data(){
return {
}
},
methods: {
handleSizeChange(newSize) {
var newValue={
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，實現(xiàn)雙向數(shù)據(jù)通信。當(dāng)頁碼或每頁條數(shù)改變時，觸發(fā)分頁事件@pagination，提供與父組件方法綁定。
此處約定了pageInfo的字段結(jié)構(gòu)如下：
pageInfo:{
pagenum : 1, //Number
pagesize : 10, //Number
total : 0 //Number
}
父組件必須提供相同結(jié)構(gòu)的數(shù)據(jù)對象來綁定組件內(nèi)部的pageInfo對象。
3.2、注冊分頁組件
然后注冊此分頁組件，在main.js中加入下列代碼：
import pagination from '@/components/Pagination.vue'
// 注冊分頁插件
Vue.component('pagination', pagination)
3.3、父組件調(diào)用方法
用pagination組件修改前面第二章的代碼。
模板部分：
<!-- 分頁區(qū)域 -->
<pagination v-model="pageInfo" @pagination="queryUsers"></pagination>
腳本部分：
export default {
data() {
return {
formData : {
//查詢信息
queryInfo:{
userType : 0,
deleteFlag: 2, //表示所有類型
pagenum : 1,
pagesize : 10
},
// 用戶類型選擇框當(dāng)前選中顯示標(biāo)簽值
userTypeLabel : "所有類型",
// 用戶狀態(tài)選擇框當(dāng)前選中顯示標(biāo)簽值
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事件響應(yīng)方法了。分頁信息發(fā)生改變時，觸發(fā)綁定的queryUsers方法。
另外，如需調(diào)整pageSizes，則在模板處類似如下設(shè)置：
:pageSizes=[10,20,30,50,100]
4、參考文章
此組件開發(fā)主要參考了下列文章：
Vue+el-pagination二次封裝，https://blog.csdn.net/weixin_47259997/article/details/107887823。
vue項目 使用elementui中的el-pagination封裝公用分頁組件，https://www.jianshu.com/p/e241e5710fb0/。
到此這篇關(guān)于Vue使用v-model封裝el-pagination組件的全過程的文章就介紹到這了,更多相關(guān)v-model封裝el-pagination組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue左右滑動選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇vue基本使用--refs獲取組件或元素的實例，具有很好的參考價值，希望對大家有所幫助。一起個跟隨小編過來看看吧2019-11-11
vue-router中關(guān)于children的使用方法
這篇文章主要介紹了vue-router中關(guān)于children的使用方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue日期選擇框之時間范圍的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點說就是使用配置文件來管理多環(huán)境，實現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vue中的change事件無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)打地鼠小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了el-form 多層級表單的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue-cli3.x + axios 跨域方案踩坑指北，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07