Vue Element-Ui 前端控制表格分页

Vue Element-Ui 前端控制表格分页

<template>
  <div >
 <el-table :data="list.slice((page-1)*size,page*size)"> <!-- 表格中使用:data来决定数据 其中的slice决定分页显示记录数 --> 
      <el-table-column type="selection"></el-table-column>    <!-- 此处按需添加表头 --> 
    </el-table>
       <div style="margin: 20px 0px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" <!-- 分页控制器 --> 
        :page-size="size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
      </div>
</template>
export default {
    data() {
      return {       
        page: 1,//当前页码
        size: 10,//当前页显示的记录条数
        total: 0,//总记录数
        list: [], //数据数组      
      }
    },
    mounted() {
       getCollegeIdDepartment().then(res => { //这是已经封装好的接口，仅供参考 接口返回必须有两项，一是数据数组，二是标识数组长度（总记录数）的值
          that.list= res['data']    //数据数组
          that.total = res['total']    //数组长度（总记录数）
        }),           
        handleSizeChange(val) {/* 当前页显示的记录条数改变 */
        this.size = val
      },        
        handleCurrentChange(val) {/* 页码改变 */
        this.page = val
      },
    }
}