vue中前端实现数据分页展示

<template>
  <div class="echarts">
    <el-table :data="dataList" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="pagation.currentPage" :page-size="pagation.pagesize" layout="total, prev, pager, next"
      :total="pagation.total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    data: () => ({
      tableData: [],
      pagation: {
        pagesize: 10,
        total: 0,
        currentPage: 1
      },
      listArr: []
    }),
    created() {
      this.init()
    },
    computed: {
      dataList() {
        const dataCodeList = this.tableData
        const pagesize = this.pagation.pagesize
        const currentPage = this.pagation.currentPage
        return dataCodeList.slice((currentPage - 1) * pagesize, pagesize * currentPage)
      }
    },
    methods: {
      init() {
        let arr = []
        const num = 26
        for (var i = 0; i < num; i++) {
          var obj = {
            date: '2016-05-02',
            name: '王小虎' + num,
            address: '上海市普陀区金沙江路 1518 弄'
          }
          arr.push(obj)
        }
        this.pagation.total = num
        this.tableData = arr
      },
      handleSizeChange(size) {
        this.pagation.pagesize = size
      },
      handleCurrentChange(currentPage) {
        this.pagation.currentPage = currentPage
      }
    }
  };
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 400px;
    margin: auto;
    text-align: center;
  }
</style>在这里插入代码片