element分页

效果图:

使用组件:

<template>
  <div>
    <!-- 记录 -->
    <section class="balances-record_list-container">
      <el-tabs>
        <!-- tonArray需要后台请求数据赋值 ,我没有写请求过程-->
        <!-- 最重要的一点,就是要使用slice() 方法!!!这样数据才会根据你点击的页码来 显示条数!!-->
        <!-- slice() 方法可从已有的数组中返回选定的元素。 -->
        <BalancesRecordTable
          has-action
          :info="tonArray.slice((pageNum-1)*pageSize,pageNum*pageSize)"
        ></BalancesRecordTable>
      </el-tabs>
    </section>
    <!-- 添加分页 -->
    <div v-show="total">
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tonArray: [], //辨别数组
      pageNum: 1, //接口固定数
      pageSize: 10, //接口固定数，每页条数
      currentPage: 1, //分页焦点页码
      total: 0, //分页总条数
    };
  },
  methods: {
    // 分页功能
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val;
    },
  },
};
</script>