vue用element实现分页功能

vue用element实现分页功能，刚入门看不懂element组件中的分页功能数据是怎么跟着页码变动的，研究了一下实现基础的功能效果

  <div>
    <!-- slice作用是从数组中选择元素 -->
    <div
      class="box"
      v-for="(item, index) in tableData.slice(
        (pageInfo.currentPage - 1) * pageInfo.pageSize,
        pageInfo.currentPage * pageInfo.pageSize
      )"
      :key="index"
    >
      <p>{{ item.name }}</p>
      <p>{{ item.date }}</p>
      <p>{{ item.content }}</p>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.currentPage"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.pageTotal"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //分页
      pageInfo: {
        currentPage: 1,
        pageSize: 2, //每页的初始数量
        pageTotal: 2, //总页数
      },
      tableData: [
        {
          date: '2016-05-01',
          name: '小明',
          content: '内容 ',
        },
        {
          date: '2016-05-02',
          name: '小花',
          content: '内容1',
        },
        {
          date: '2016-05-03',
          name: '小虎',
          content: '内容2',
        },
        {
          date: '2016-05-04',
          name: '小新',
          content: '内容3',
        },
        {
          date: '2016-05-05',
          name: '小小',
          content: '内容4',
        },
        {
          date: '2016-05-06',
          name: '小王',
          content: '内容5',
        },
      ],
    }
  },
  created() {
    this.pageInfo.pageTotal = this.tableData.length //根据数据量显示页数
  },

  methods: {
    handleSizeChange(val) {
      //pageSize 改变时会触发
      this.pageInfo.pageSize = val
    },
    handleCurrentChange(val) {
      //currentPage 改变时会触发
      this.pageInfo.currentPage = val
    },
  },
}
</script>

<style >
.box {
  width: 80%;
  display: flex;
  margin: 0 auto;
}
p {
  margin-left: 50px;
}
</style>