table表格+ 分页 封装

参数说明：

pageSize：每页显示多少条

pageCount：总共多少页

pageIndex：当前是第几页（这里是从0开发）

<template>
  <div>
    <el-table :data="traceTableList" class="border-all table-components-content" border style=" 100%;height:100%;">
      <el-table-column v-for="(headEle, index) in headerTraceTableList" :key="index" :prop="headEle.prop" :label="headEle.label" :width="headEle.width" :min-width="headEle.minWidth">
        <template slot-scope="scope">
          <!-- :class="{'text-warn': scope.row[headEle.prop]<0 }" -->
          <span :class="{'text-danger': (headEle.isWarning && scope.row[headEle.prop]) < 0}">{{ scope.row[headEle.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="showPage" class="page-container margin-t-10">
      <el-button type="primary" size="mini" icon="el-icon-arrow-left" :disabled="pageIndex===0" @click="handleLeftPage" />
      <span class="text-color-3">{{ pageIndex + 1 }}</span>
      <el-button type="primary" size="mini" icon="el-icon-arrow-right" :disabled="pageIndex < pageInfo.pageCount" @click="handleRightPage" />
    </div>
  </div>
</template>
<script>
  export default {
    name: 'TraceTable',
    props: {
      headerTraceTableList: {
        type: Array,
        default: function () {
          return []
        }
      },
      traceTableList: {
        type: Array,
        default: function () {
          return []
        }
      },
      showPage: {
        type: Boolean,
        default: false
      },
      pageInfo: {
        type: Object,
        default: function () {
          return {
            pageCount: 0,
            pageSize: 20
          }
        }
      }
    },
    data () {
      return {
        pageIndex: 0
      }
    },
    methods: {
      handleLeftPage () {
        this.pageIndex--
        this.$emit('turnPage', { pageIndex: this.pageIndex, pageSize: this.pageInfo.pageSize })
      },
      // 右分页
      handleRightPage () {
        this.pageIndex++
        this.$emit('turnPage', { pageIndex: this.pageIndex, pageSize: this.pageInfo.pageSize })
      }
    }
  }
</script>
<style scoped>
  .page-container > span {
    width: 35px;
    height: 28px;
    display: inline-block;
    text-align: center;
  }
</style>