Element-ui table组件二次封装之添加分页功能

1、参考官方文档：https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md
2、使用make new命令新增组件

node build/bin/new.js page-table "分页表格"

3、修改packages/page-table/src/main.vue代码

<template>
  <div class="el-page-table">
      <el-table
          :data="data"
          :height="height"
          :max-height="maxHeight"
          :stripe="stripe"
          :border="border"
          style="width: 100%"
      >
          <slot></slot>
      </el-table>
      <el-pagination
              @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: 'ElPageTable',
  props: {
    data: {
      default() {
        return [];
      },
      type: Array
    },
    height: [String, Number],
    maxHeight: [String, Number],
    stripe: {
      default() {
        return true;
      },
      type: Boolean
    },
    border: {
      default() {
        return true;
      },
      type: Boolean
    },
    currentPage: {
      default() {
        return 1;
      },
      type: Number
    },
    pageSizes: {
      default() {
        return [100, 200, 300, 400];
      },
      type: Array
    },
    pageSize: {
      default() {
        return 10;
      },
      type: Number
    },
    layout: {
      default() {
        return 'total, sizes, prev, pager, next, jumper';
      },
      type: String
    },
    total: {
      default() {
        return 0;
      },
      type: Number
    }
  },
  data: function() {
    return {
    };
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('size-change', val);
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val);
    }
  },
  mounted() {

  }
};
</script>

4、使用 npm run dist打包
4、使用：引入相关的js和css文件，参考：http://element.eleme.io/#/zh-CN/component/installation

<el-page-table :data="tableData" :current-page="3" @current-change="handleCurrentChange">
        <el-table-column label="商品 ID" prop="id">
        </el-table-column>
        <el-table-column label="商品名称" prop="name">
        </el-table-column>
        <el-table-column label="描述" prop="desc">
        </el-table-column>
    </el-page-table>

new Vue({
      el: '#app',
      data: function() {
        return { tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]};
      },
      methods: {
        handleCurrentChange: function(val) {
          console.log('当前页：' + val);
        }
      }
    });

5、说明
1.使用props获取父组件传递过来的参数
2.使用this.$emit调用父组件的事件
3.使用输入标签内的内容：el-table-column部分
4.如果需要ElTable及ElPagination其他属性和事件可参照上述方法拓展

最终效果如下：