vue实现简单分页功能，后台只需要传一个总数

后台只需要传给前台一个总数就能分页

关键代码1

data () {
return{

          // 默认显示第几页
           currentPage:1,
           // 个数选择器（可修改）
           pageSizes:[5,10],
           // 默认每页显示的条数（可修改）
           PageSize:4,
           //定义的总数
           total:0,
           //用来存放后台返回来的列表数据
           list:[]，

}
}

关键代码2

methods: {
       // 每页显示的条数
       handleSizeChange(val) {
           // 改变每页显示的条数 
           this.PageSize=val
           // 注意：在改变每页显示的条数时，要将页码显示到第一页
           this.currentPage=1
       },
         // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
       },
}

关键代码3

1. list是后台返回的数据
2. 然后在后面加".slice((currentPage-1)PageSize,currentPagePageSize"(引号内的内容）

 <el-table :data="list.slice((currentPage-1)*PageSize,currentPage*PageSize)" border fit highlight-current-row>
 </el-table>

关键代码4

 <!-- 放在<el-table></el-table>标签后面 -->
     <div>
           <el-pagination @size-change="handleSizeChange" 
                          @current-change="handleCurrentChange" 
                          :current-page="currentPage" 
                          :page-sizes="pageSizes" 
                          :page-size="PageSize" 
                           layout="total, sizes, prev, pager, next, jumper" 
                          :total="total">
             </el-pagination>
       </div>