elementUI-Table+Pagination实现的常见分页表格（附封装好的Vue组件代码）

element的Table组件可以很方便的展示对象数组数据，但是实际应用场景中的数组往往很长、不方便一口气全部展示出来。这时就需要同时使用Table和Pagination组件一起进行数据表的分页展示。
分页操作可以直接在后端拿取数据时进行、而且这样效率更高。但有些情况下就需要在前端组件里自己分页、比如：后端拿到的数据是二维数组、而要展示的数据表是里面那层。
本文介绍的例子是前端自己拿全部数据情况下的分页方法，后端分页时直接删去多余代码即可。

原创示例情景：数据为长度不定的对象数组，key为name、status；status需要根据值显示不同颜色。期望以每页5个的表格形式展示，要求表格写成一个数据自定义的vue组件。

表格组件 myTable.vue：

<template>
    <div>
        <el-table :data="showPage"
                  tooltip-effect="light"
                  border>
            <el-table-column show-overflow-tooltip label="名称" min-width="40%"
                             prop="name">el-table-column>
            <el-table-column show-overflow-tooltip label="状态" min-width="60%">
                <template slot-scope="scope">
                    <span :style="{
      color:getColor(scope.row)}">{
  {scope.row.status}}span>
                template>
            el-table-column>
        el-table>
        <div>
            <el-pagination
                    @current-change=