例子：用户
请求格式
返回数据类型
{
"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": "255677899@qq.com",
"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当前页面发生改变事件
需求
需求：当每页显示条数发生变化时，页数（数据足够）可能还在当前页，或者最后一页（数据不够）
需求：当每页显示条数发生变化时，页数回归第一页文章来源：https://www.toymoban.com/news/detail-742298.html
文章来源地址https://www.toymoban.com/news/detail-742298.html
页面代码
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqAllUser } from '@/api/user/index'
import type { allUser, allUserReponseData } from '@/api/user/type'
const userData = ref<allUser[]>([])
//分页器当前页码
const page = ref<number>(1)
//每一页展示几条数据
const pageSize = ref<number>(10)
const total = ref<number>(0)
//处理分页模块
const handleSizeChange = () => {
getAllUser()
}
//处理分页模块结束
//获取所有用户模块
const getAllUser = async (pager = 1) => {
page.value = pager
const res: allUserReponseData = await reqAllUser(page.value, pageSize.value)
console.log(res, '111')
if (res.code == 200) {
total.value = res.total
userData.value = res.data
}
}
onMounted(() => {
//获取所有用户模块
getAllUser()
})
</script>
<template>
<div class="card">
<el-card class="box-card">
<el-form :inline="true" class="form">
<el-form-item label="用户名">
<el-input placeholder="请你搜索用户名" />
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
<el-button type="primary" plain>重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card style="margin: 10px 0">
<!-- 添加按钮 -->
<el-button type="primary" size="default">添加</el-button>
<el-button type="danger" size="default">批量删除</el-button>
<!-- 表格 -->
<el-table :data="userData" style="margin-top: 10px">
<el-table-column type="selection" width="80px" align="center" />
<el-table-column prop="id" label="id" width="80px" align="center" />
<el-table-column prop="username" label="用户名字" width="120px" align="center" />
<el-table-column prop="avatar" label="用户头像" width="120px" align="center">
<template #default="scope">
<img :src="scope.row.avatar" style="width: 36px; margin: 0px 10px" alt="加载失败" />
</template>
</el-table-column>
<el-table-column prop="gender" label="用户性别" width="120px" align="center" />
<el-table-column prop="age" label="用户年龄" align="center" />
<el-table-column prop="email" label="用户邮箱" align="center" />
<el-table-column fixed="right" label="操作" width="180">
<template #default>
<el-button link type="primary" size="small">Detail</el-button>
<el-button link type="primary" size="small">Edit</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页按钮 -->
<!-- v-model:current-page当前页码
v-model:page-size设置每页展示数据的条数
page-sizes每页显示个数选择器的个数
small是否使用小型分页样式
disabled 是否禁用分页
-->
<el-pagination
v-model:current-page="page"
v-model:page-size="pageSize"
:page-sizes="[3, 5, 7, 9]"
:small="false"
:disabled="false"
:background="false"
layout=" prev, pager, next, jumper,->,sizes, total"
:total="total"
@size-change="handleSizeChange"
@current-change="getAllUser"
/>
</el-card>
</div>
</template>
<style scoped lang="scss">
.form {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>到了这里，关于vue3后台管理系统之实现分页功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
