对element-ui分页组件Pagination再简化

重置组件目的

在使用Pagination分页组件时 每用一次就要定义一个变量来存储 current-page 与 page-size 并且要定义两个方法size-change与current-change进行分页切换甚是繁琐于是对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>

未简化前使用（我们使用组件没用一次分页组件都要多个字段来存储分页数的值和分页大小及切换方法）

<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(`当前页: ${val}`);
      },
     handleSizeChange2(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange2(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return { 
        pageNo: 1,
        pageSize:10,
        pageNo2: 1,
        pageSize2:10
      };
    }
  }
</script>

简化后使用 （我们就不再需要定义这些字段来存储这些值了 且只要定义一个方法来进行切换想要改变值直接改 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()
        },
      //拉取数据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(`当前页: ${pageNo}`);
        console.log(`每页 ${pageSize} 条`);
      },
      handleCurrentSizeChange2(pageNo,pageSize) {
        console.log(`当前页: ${pageNo}`);
        console.log(`每页 ${pageSize} 条`);
      }
    },
    data() {
      return {  };
    },
    mounted(){
      //mounted中正常使用
      this.search();
    },
    created() {
       //在created拉取数据因为dom树还没挂载需要使用$nextTick进行延迟调用
       this.$nextTick(function () {
           this.getTableData2();
       })
    }
  }
</script>