elment-ui简单表格分页

vue:

<el-table
  border
  :data="tableData"
>
  <el-table-column
    prop="name"
    label="姓名"
    width="180">
  </el-table-column>
  <el-table-column
    prop="sno"
    label="学号"
    width="180">
  </el-table-column>
  <el-table-column
    prop="age"
    label="年龄">
  </el-table-column>
  <el-table-column
    prop="sex"
    label="性别">
  </el-table-column>
</el-table>
<el-pagination
  layout="total, sizes, prev, pager, next, jumper"
  :current-page="currentPage"
  :page-sizes="[1, 2, 4, 8]"
  :page-size="100"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
>
</el-pagination>

js:

data() {
  return {
    tableData:[], // 每页展示数据
    tempData:[], // 后台返回的所有数据
    size : 1, // 每页行数
    currentPage : 1, // 当前页
    total:1, // 表格总条数
  };
},
methods: {
  show1() {
    const that = this;
    axios.get('http://localhost:8090/user/findAll')
      .then(function (response) {
        // console.log(response);
        that.tableData = [];
        that.tempData = response.data;
        that.total = that.tempData.length;
        that.setCurrentPage(that.currentPage,that.size);
      })
  },
  setCurrentPage (currentPage,size) {
    this.tableData = [];
    let start = (currentPage - 1) * size;
    let end = currentPage * size  ;
    console.log("开始：" + start + "....结束：" + end);
// slice:返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
    this.tableData = this.tempData.slice(start,end);
  },
  handleSizeChange (val) {
    console.log("每页行数：" + val);
    this.size = val;
    this.setCurrentPage(this.currentPage,this.size);
  },
  handleCurrentChange (val) {
    console.log("当前页：" + val);
    this.currentPage = val;
    this.setCurrentPage(this.currentPage,this.size);
  },

}