Vue使用v-model封裝el-pagination組件的全過(guò)程

更新時(shí)間：2021年07月07日 08:37:03 作者：阿拉伯1999

通過(guò)封裝el-pagination組件開(kāi)發(fā)自定義分頁(yè)組件的類似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動(dòng)手搞一個(gè)，對(duì)v-model封裝el-pagination組件相關(guān)知識(shí)感興趣的朋友一起看看吧

使用v-model綁定分頁(yè)信息對(duì)象，分頁(yè)信息對(duì)象包括3個(gè)核心屬性參數(shù)，分頁(yè)事件直接綁定查詢數(shù)據(jù)的方法，消除父組件的handleSizeChange和handleCurrentChange的綁定事件方法。

1、前言

通過(guò)封裝el-pagination組件開(kāi)發(fā)自定義分頁(yè)組件的類似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動(dòng)手搞一個(gè)。

2、背景

2.1、常規(guī)分頁(yè)處理方法

利用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 : "所有類型"
      },
        
      // 分頁(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();
    }
  }

2.2、問(wèn)題分析

每個(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ù)的方法。

3、方案實(shí)施

3.1、自定義分頁(yè)組件

編寫(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ì)象。

3.2、注冊(cè)分頁(yè)組件

然后注冊(cè)此分頁(yè)組件，在main.js中加入下列代碼：

import pagination  from '@/components/Pagination.vue'

// 注冊(cè)分頁(yè)插件
Vue.component('pagination', pagination)

3.3、父組件調(diào)用方法

用pagination組件修改前面第二章的代碼。

模板部分：

  <!-- 分頁(yè)區(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 : "所有類型"
      },
        
      // 分頁(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，則在模板處類似如下設(shè)置：

:pageSizes=[10,20,30,50,100]

4、參考文章

此組件開(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組件的全過(guò)程的文章就介紹到這了,更多相關(guān)v-model封裝el-pagination組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: