您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue使用v-model封裝el-pagination組件的詳細(xì)步驟”,在日常操作中,相信很多人在Vue使用v-model封裝el-pagination組件的詳細(xì)步驟問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Vue使用v-model封裝el-pagination組件的詳細(xì)步驟”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
使用v-model綁定分頁(yè)信息對(duì)象,分頁(yè)信息對(duì)象包括3個(gè)核心屬性參數(shù),分頁(yè)事件直接綁定查詢數(shù)據(jù)的方法,消除父組件的handleSizeChange和handleCurrentChange的綁定事件方法。
??通過(guò)封裝el-pagination組件開(kāi)發(fā)自定義分頁(yè)組件的類(lèi)似文章網(wǎng)上已經(jīng)有很多了,但看了一圈,總是不如意,于是決定還是自己動(dòng)手搞一個(gè)。
??利用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, //表示所有類(lèi)型 pagenum : 1, pagesize : 10 }, // 用戶類(lèi)型選擇框當(dāng)前選中顯示標(biāo)簽值 userTypeLabel : "所有類(lèi)型", // 用戶狀態(tài)選擇框當(dāng)前選中顯示標(biāo)簽值 userStatusLabel : "所有類(lèi)型" }, // 分頁(yè)信息 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); }); }, // 每頁(yè)條數(shù)改變 handleSizeChange(newSize) { this.pageInfo.pagesize = newSize; this.queryUsers(); }, // 當(dāng)前頁(yè)碼改變 handleCurrentChange(newPage) { this.pageInfo.pagenum = newPage; this.queryUsers(); } }
??每個(gè)分頁(yè)查詢,都需要這么來(lái)一套,有點(diǎn)簡(jiǎn)單重復(fù),又略有不同,即查詢數(shù)據(jù)的方法會(huì)不同。
??對(duì)于有強(qiáng)迫癥的程序猿來(lái)說(shuō),簡(jiǎn)單重復(fù)的代碼無(wú)疑非常令人不爽。因此,需要將之組件化。
??分析el-pagination分頁(yè)組件:
有三個(gè)核心屬性參數(shù),分別是:當(dāng)前頁(yè)碼(current-page)、每頁(yè)條數(shù)(page-size)、總記錄條數(shù)(total)。核心屬性參數(shù)通過(guò)綁定父組件頁(yè)面數(shù)據(jù),實(shí)行雙向聯(lián)動(dòng)。其中當(dāng)前頁(yè)碼和每頁(yè)條數(shù)一般通過(guò)操作分頁(yè)子組件來(lái)改變,總記錄條數(shù)通過(guò)查詢數(shù)據(jù)后由父組件進(jìn)行設(shè)置。
有兩個(gè)事件:分別是:@size-change(每頁(yè)條數(shù)改變事件)、@current-change(當(dāng)前頁(yè)碼改變事件)。這兩個(gè)事件,分別綁定父組件的對(duì)應(yīng)事件處理方法handleSizeChange和handleCurrentChange,兩者均調(diào)用查詢數(shù)據(jù)的方法,查詢數(shù)據(jù)的方法中,得到結(jié)果集后,設(shè)置總記錄條數(shù)。
??自定義分頁(yè)組件的開(kāi)發(fā)目標(biāo):消除父組件的handleSizeChange和handleCurrentChange的綁定事件方法。
??思路:使用v-model綁定分頁(yè)信息對(duì)象,分頁(yè)信息對(duì)象包括3個(gè)核心屬性參數(shù),即上述的pageInfo。然后分頁(yè)事件直接綁定查詢數(shù)據(jù)的方法。
??編寫(xiě)一個(gè)自定義分頁(yè)組件代碼,文件為/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 : { // 每頁(yè)條數(shù)選擇項(xiàng) pageSizes: { type: Array, default() { return [5, 10, 15, 20]; } }, // v-model綁定的數(shù)據(jù)對(duì)象 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>
??自定義分頁(yè)組件,名稱為pagination,其使用v-model,實(shí)現(xiàn)雙向數(shù)據(jù)通信。當(dāng)頁(yè)碼或每頁(yè)條數(shù)改變時(shí),觸發(fā)分頁(yè)事件@pagination,提供與父組件方法綁定。
??此處約定了pageInfo的字段結(jié)構(gòu)如下:
pageInfo:{ pagenum : 1, //Number pagesize : 10, //Number total : 0 //Number }
??父組件必須提供相同結(jié)構(gòu)的數(shù)據(jù)對(duì)象來(lái)綁定組件內(nèi)部的pageInfo對(duì)象。
??然后注冊(cè)此分頁(yè)組件,在main.js中加入下列代碼:
import pagination from '@/components/Pagination.vue' // 注冊(cè)分頁(yè)插件 Vue.component('pagination', pagination)
??用pagination組件修改前面第二章的代碼。
??模板部分:
<!-- 分頁(yè)區(qū)域 --> <pagination v-model="pageInfo" @pagination="queryUsers"></pagination>
??腳本部分:
export default { data() { return { formData : { //查詢信息 queryInfo:{ userType : 0, deleteFlag: 2, //表示所有類(lèi)型 pagenum : 1, pagesize : 10 }, // 用戶類(lèi)型選擇框當(dāng)前選中顯示標(biāo)簽值 userTypeLabel : "所有類(lèi)型", // 用戶狀態(tài)選擇框當(dāng)前選中顯示標(biāo)簽值 userStatusLabel : "所有類(lèi)型" }, // 分頁(yè)信息 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)方法了。分頁(yè)信息發(fā)生改變時(shí),觸發(fā)綁定的queryUsers方法。
??另外,如需調(diào)整pageSizes,則在模板處類(lèi)似如下設(shè)置:
:pageSizes=[10,20,30,50,100]
??此組件開(kāi)發(fā)主要參考了下列文章:
Vue+el-pagination二次封裝,https://blog.csdn.net/weixin_47259997/article/details/107887823。
vue項(xiàng)目 使用elementui中的el-pagination封裝公用分頁(yè)組件,https://www.jianshu.com/p/e241e5710fb0/。
到此,關(guān)于“Vue使用v-model封裝el-pagination組件的詳細(xì)步驟”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。