关于vue Pagination 分页数据制作

一般情况不是前端做分页 就是后端做分页

前端做分页

 <el-pagination
     @size-change="handleSizeChange" 
     @current-change="handleCurrentChange" 
     :current-page="state.currentPage4" 
     :page-size="sizepage" 
     :page-sizes="[5, 20, 30, 40, 100, 300]" 
     layout="total,sizes, prev, pager, next, jumper" 
     :total="state.tableData.length">
 </el-pagination>

1. 总数赋值total

2. 声明两个事件 handleSizeChange handleCurrentChange

3. 并将data里的页数 个数 赋值给两个事件

 const handleSizeChange = val => {
        console.log(`每页 ${val} 条`)
        state.sizepage = val
      }
      const handleCurrentChange = val => {
        console.log(`当前页: ${val}`)
        state.currentPage4 = val
      }

最后就是table data的设置

用筛选slice对页数 条数进行控制筛选

关于更详细的el-pagination组件信息关注官方 组件库

后端做分页

只需调用后端api接口时将页数 条数以对象的形式传给后端 然后拿相对应的数据即可