<template>
  <div class="app">
    <!-- 将获取到的数据进行计算 -->
    <div
      class="timeItem"
      v-for="(item, index) in recordData.slice(
        (currentPage - 1) * Count,
        currentPage * Count
      )"
      :key="index"
      style="color: #fff"
    >
      {{ item.Time }}
    </div>

    <div class="tabListPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="Count"
        layout=" prev, pager, next, jumper"
        :total="TotalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 总数据
      recordData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      TotalCount: 1,
      // 默认每页显示的条数（可修改）
      Count: 1,
    };
  },
  methods: {
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.Count = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
  },
  created: function () {
    (this.recordData =  [{
            "Time": "2021-06-15 13:01:14"
        },{
            "Time": "2021-06-15 13:01:09"
        },{
            "Time": "2021-06-15 13:01:04"
        },{
            "Time": "2021-06-15 13:00:59"
        },{
            "Time": "2021-06-15 13:00:54"
        }]),
      // 将数据的长度赋值给TotalCount
      (this.TotalCount = this.recordData.length);
  },
};
</script>