本页导航
article
pagination
AI摘要
分页组件是一种用于将大量数据分割成多个页面显示的工具,以提升用户体验和系统性能。它通常包含页码、上一页/下一页按钮等元素,允许用户在不同数据页面间导航。其核心要点在于合理划分数据、提供清晰的导航反馈,并确保在不同场景下的兼容性与易用性。
说明
分页组件
使用
<template>
...
<Pagination
v-model:limit="page.pageSize"
v-model:page="page.current"
:total="total"
@pagination="getUser"
>
</Pagination>
...
</div>
</template>
<script lang="ts" setup>
import { Pagination } from "liyao-vue-common"
const page: Record<string, any> = ref<UserQueryRequest>({
current: 1,
pageSize: 10
});
let total: number;
onMounted(() => {
getUser();
});
function getUser() {
return new Promise((resolve) => {
// 后端获取数据接口...
UserControllerService.listPageVo(page.value).then((res) => {
...
total = parseInt(res.data?.total);
...
});
});
}
</script>
最后更新于 2026-02-17 19:41