基于Element组件库再次封装翻页控件

项目背景

一般的后台项目中，表格比较多，并且涉及到分页和条件检索。

如果每个表格都单独配置一个分页，后期维护起来比较繁琐，而且，写代码也是copy来copy去，没有什么技术含量。

因此，基于ElementUI 分页组件的二次封装就能够帮助我们大大的提高工作效率。

页面中使用如下：

  <common-pagination
     :currentPage="table.pageInfo.pageNo"
     :pageSize="table.pageInfo.pageSize"
     :total="table.pageInfo.totalRows"
     @sizeChange="handlerSizeChange"
     @currentChange="handlerCurrentChange"
  ></common-pagination>

data(){
	return{
	table: {
		pageInfo: {
        	sort: '',
        	pageSize: 10,
        	pageNo: 1,
        	totalRows: 0,
       	   }
        }
	}
}

 handlerSizeChange(val) {
      table.pageInfo.pageSize = val
      table.pageInfo.pageNo = 1
      // 请求页面数据
      this.getData()
   },
 handlerCurrentChange(val) {
      const table = activeTab.table
      table.pageInfo.pageNo = val
      // 请求页面数据
      this.getData()
  },

组件代码如下：

<template>
  <div class="common-table-pagination"
       style="text-align: right;display: flex;flex-direction: row;justify-content: flex-end;overflow:hidden;">
    <el-pagination
        style="text-align:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=currentPage
        :page-sizes=pageSizes
        :page-size=pageSize
        :layout=layout
        :total=total>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'table-pagination',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 50]
      }
    },
    total: {
      type :Number,
      required: true
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('sizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    }
  }
}
</script>

<style scoped>

</style>