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="val => handleChange(val, 'pageSize')"
      @current-change="val => handleChange(val, 'pageNumber ')"
      @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() {
	      const num = Math.ceil(this.userData.length / this.pageSize)
	      if (this.pageNumber > num) {
	        this.pageNumber = num
	      }
          this.tableData = this.allDa.slice((this.pageNumber - 1) * this.pageSize, (this.pageNumber - 1) * this.pageSize + this.pageSize)
        },
        handleChange(val, key) {
	      this[key]= val
	      this.paging()
	    }
      }
    }
  </script>