Element-ui table前端分页

<template>
    <el-table :data="tableData" 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
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="pageNumber -= 1"
      @next-click="pageNumber += 1"
      :current-page="pageNumber"
      :page-sizes="[10,20,30,50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </template>

  <script>
    export default {
     
      data() {
     
        return {
     
          allDa: [],
          tableData: [],
          pageNumber: 1,
          pageSize: 10,
          total: 0
        }
      },
      methods: {
     
      	// 获取数据
		getDa() {
     
	      Api.getData().then(res => {
     
	      	this.allDa = res.data
	      	this.total = res.data.length
	      	this.paging()
	      })
	    },
	    // 分页方法
	    paging() {
     
          this.tableData = this.allDa.slice((this.pageNumber - 1) * this.pageSize, (this.pageNumber - 1) * this.pageSize + this.pageSize)
        },
        handleSizeChange(val) {
     
	      this.pageSize = val
	      this.paging()
	    },
	    handleCurrentChange(val) {
     
	      this.pageNumber = val
	      this.paging()
	    }
      }
    }
  </script>