element的表格分页组件

1、新建组件（pagination.vue）

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="page.currentPage"
    :page-sizes="[10, 20, 30, 50,100]"
    :page-size="page.pageSize"
    background :small="small"
    layout=" prev, pager, next,total,jumper,sizes"
    :total="page.total">
  </el-pagination>
</template>
<script>
    export default {
        name: "pagination",
        props:{
          page:{type:Object,required:true},
          queryOperate:{type:Function,required:true},
          isSmall:{type:Boolean }
        },
        data() {
            return {
              // 采用小型分页
              small:this.isSmall?this.isSmall:false
            };
        },
        methods: {
          handleSizeChange: function(val) { // 每页条数切换
            this.page.currentPage = 1;
            this.page.pageSize = val;
            this.queryOperate();
          },
          handleCurrentChange: function(val) {//页码切换
            this.page.currentPage = val;
            this.queryOperate();
          },
        }
    };
</script>
<style scoped>
   /*引用分页的样式 */
  /* @import "../../css/pagination.css"; */
</style>

2、table组件下添加分页组件，先引入组件pagination.vue，tableQuery是表格的查询事件。
调用分页组件：

<pagination :page="page" :queryOperate="tableQuery"></pagination>

page参数在data返回，格式如下：

      //分页
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },