vue pagination前端分页

vue pagination前端分页

1、定义相关参数

data(){
    return {
      datas: list
      page: 1,
      limit: 10,
    }

2、表格数据设置

 <el-table :data="datas.slice((page-1)*limit,page*limit)">

3、分页器设置

<pagination v-show="datas.length>0" :total="datas.length" :page.sync="page" :limit.sync="limit" @size-change="(val) => handleSizeChange(limit,page, val)" @current-change="(val) => handleCurrentChange(page, val)"  />

4、分页相关函数

 handleSizeChange(limit,page,val) {
      limit = 1;
      page = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    },