重置組件目的

在使用Pagination分頁組件時 每用一次就要定義一個變量來存儲 current-page 與 page-size 并且要定義兩個方法size-change與current-change進(jìn)行分頁切換甚是繁瑣于是對Pagination分頁組件再簡化。

組件代碼 （簡化后代碼兼容原有使用方法）

<template>
    <!--分頁器-->
    <div style="margin-top: 20px; margin-bottom: 20px; padding-bottom: 20px">
        <el-pagination :small="small" @current-change="handleCurrentChange" @size-change="handleSizeChange"
                       :page-size.sync="customPageSize" :page-count="pageCount" :page-sizes="pageSizes"
                       :pager-count="pagerCount"
                       :current-page.sync="customCurrentPage" :layout="layout"
                       :total="customTotal" :popper-class="popperClass" :prev-text="prevText" :next-text="nextText"
                       :background="background" :disabled="disabled" :hide-on-single-page="hideOnSinglePage"
                       style="text-align: right"></el-pagination>
    </div>
</template>

<script>
    /*自定義分頁 - element-ui分頁再封裝*/
    export default {
        name: "ElPaginationCustom",
        data() {
            return {
                localPageNo:1,
                localPageSize:10,
                localTotal:0
            }
        },
        props: {
            pageSize: {
                type: Number,
                default: 10
            },
            small: Boolean,
            total:{
                type: Number,
                default: 0
            },
            pageCount: Number,
            pagerCount: {
                type: Number,
                validator(value) {
                    return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
                },
                default: 7
            },
            currentPage: {
                type: Number,
                default: 1
            },
            layout: {
                default: 'total, sizes, prev, pager, next, jumper'
            },
            pageSizes: {
                type: Array,
                default() {
                    return [10, 100, 500, 1000];
                }
            },
            popperClass: String,
            prevText: String,
            nextText: String,
            background: Boolean,
            disabled: Boolean,
            hideOnSinglePage: Boolean
        },
        computed: {
            customPageSize: {
                get: function () {
                    return this.localPageSize;
                },
                set: function (val) {
                    this.localPageSize = val;
                    this.$emit('update:pageSize', val);
                }
            },
            customCurrentPage: {
                get: function () {
                    return this.localPageNo;
                },
                set: function (val) {
                    this.localPageNo = val;
                    this.$emit('update:currentPage', val);
                }
            },
            customTotal:{
                get: function () {
                    return this.localTotal;
                }
            }
        },
        watch:{
            pageSize:{
                handler:function (val) {
                    this.localPageSize = val;
                },
                immediate:true,
                deep:true
            },
            currentPage:{
                handler:function (val) {
                    this.localPageNo = val;
                },
                immediate:true,
                deep:true
            },
            total:{
                handler:function (val) {
                    this.localTotal = val;
                },
                immediate:true,
                deep:true
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.$emit('current-change', val);
                this.handleAll(val,this.customPageSize)
            },
            handleSizeChange(val) {
                this.$emit('size-change', val);
                this.handleAll(this.customCurrentPage,val)
            },
            handleAll(pageNo,pageSize){
                this.$emit('current-size-change',pageNo,pageSize)
            }
        }
    }
</script>

<style scoped>

</style>

未簡化前使用（我們使用組件沒用一次分頁組件都要多個字段來存儲分頁數(shù)的值和分頁大小及切換方法）

<template>
    <!--分頁器1-->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNo"
      :page-size.sync="pageSize"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
     <!--分頁器2-->
     <el-pagination
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
      :current-page.sync="pageNo2"
      :page-size.sync="pageSize2"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每頁 ${val} 條`);
      },
      handleCurrentChange(val) {
        console.log(`當(dāng)前頁: ${val}`);
      },
     handleSizeChange2(val) {
        console.log(`每頁 ${val} 條`);
      },
      handleCurrentChange2(val) {
        console.log(`當(dāng)前頁: ${val}`);
      }
    },
    data() {
      return { 
        pageNo: 1,
        pageSize:10,
        pageNo2: 1,
        pageSize2:10
      };
    }
  }
</script>

簡化后使用 （我們就不再需要定義這些字段來存儲這些值了 且只要定義一個方法來進(jìn)行切換想要改變值直接改 this.refs['pagination'].localPageSize 這樣字段也減少不少 ）

<template>
 <!--分頁器1-->
 <el-pagination-custom ref="pagination" background @current-size-change="handleCurrentSizeChange"></el-pagination-custom>
 <!--分頁器2-->
 <el-pagination-custom ref="pagination2" background @current-size-change="handleCurrentSizeChange2"></el-pagination-custom>
</template>
<script>
  export default {
    methods: {
     //搜索
      search() {
          this.$refs['pagination'].localPageNo = 1;
          this.$refs['pagination'].localPageSize = 10;
          this.getTableData()
        },
      //拉取數(shù)據(jù)1
      getTableData(){
          this.$http.get('········'，{
             page: this.$refs['pagination'].localPageNo,
             pageSize: this.$refs['pagination'].localPageSize
          }).then(res=>{
          })
      },
     getTableData2(){
          this.$http.get('········'，{
             page: this.$refs['pagination2'].localPageNo,
             pageSize: this.$refs['pagination2'].localPageSize
          }).then(res=>{
          })
      },
      handleCurrentSizeChange(pageNo,pageSize) {
        console.log(`當(dāng)前頁: ${pageNo}`);
        console.log(`每頁 ${pageSize} 條`);
      },
      handleCurrentSizeChange2(pageNo,pageSize) {
        console.log(`當(dāng)前頁: ${pageNo}`);
        console.log(`每頁 ${pageSize} 條`);
      }
    },
    data() {
      return {  };
    },
    mounted(){
      //mounted中正常使用
      this.search();
    },
    created() {
       //在created拉取數(shù)據(jù)因?yàn)閐om樹還沒掛載需要使用$nextTick進(jìn)行延遲調(diào)用
       this.$nextTick(function () {
           this.getTableData2();
       })
    }
  }
</script>