vue3后台管理系统之实现分页功能

例子：用户

请求格式

返回数据类型

{
    "code": 200,
    "message": "获取所有用户成功",
    "total": 19,
    "totalPages": 2,
    "currentPage": 1,
    "data": [
        {
            "id": 1,
            "username": "ljz",
            "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
            "realname": "卢浩辰",
            "gender": "meal",
            "age": 18,
            "email": "[email protected]",
            "userId": 1,
            "status": 0,
            "created_time": "2023-10-27T16:19:25.000Z",
            "update_time": "2023-11-02T12:08:47.000Z"
        }
    ]
}

设置返回数据类型

//定义获取全部用户数据类型
export interface allUser {
  id: number
  avatar: string
  username: string
  gender: string
  age: number
  email: string
  userId: number
  created_time: string
  code: number
}
export interface allUserReponseData {
  code: number
  message: string
  total: number
  totalPages: number
  currentPage: number
  data: allUser[]
}

属性

首先我们先要了解分页器的属性

v-model:current-page当前页码

v-model:page-size设置每页展示数据的条数

page-sizes每页显示个数选择器的个数

small是否使用小型分页样式

disabled 是否禁用分页

background 是否为分页按钮添加背景色

total 总条目数

layout 组件布局，子组件名用逗号分隔

size-change下拉菜单发生变化的时候

current-change当前页面发生改变事件

需求

需求：当每页显示条数发生变化时，页数（数据足够）可能还在当前页，或者最后一页（数据不够）

需求：当每页显示条数发生变化时，页数回归第一页

页面代码