Pagination 组件
官方文档:https://element-plus.gitee.io/zh-CN/component/pagination.html
我们把分页器封装成一个公共组件,普通分页器只需要两个参数:
选择一:page-size
每页的数量 + total
总数量
选择二:page-count
总页数 + total
总数量
外加一个回调函数:current-change
当点击分页器时就会触发
- Pagination 组件模板
<script setup lang="ts">
import { ElLoading } from 'element-plus'
const emits = defineEmits<{
(e: 'pageChange', num: number): void
}>()
const props = defineProps<{
total: number,
pageSize: number
}>()
// 切换页面回调函数
function currentChange(p: any) {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(255, 255, 255, 0.7)',
})
// 调用父组件切换页面回调函数
emits('pageChange', p)
setTimeout(() => { loading.close() }, 500)
}
</script>
<template>
<el-pagination
:page-size="pageSize"
:total="total"
@current-change="currentChange"
显示属性
layout="prev, pager, next"
hide-on-single-page
next-text="下一页"
prev-text="上一页"
/>
</template>
<style scoped>
.el-pagination {
margin: 30px auto;
justify-content: center;
}
</style>
- 父组件引用
// 从 vuex 中获取参数(也可以直接在组件中定义)
const roomList = computed(() => store.state.roomList)
const roomTotal = computed(() => store.state.roomTotal)
const roomPageSize = computed(() => store.state.roomPageSize)
// home页数改变回调函数
async function roomPageChange(pageNo: any) {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(255, 255, 255, 0.7)',
})
page.value = pageNo
await store.dispatch('getRoomList', {
pageNo, cityCode: city.value })
setTimeout(() => {
loading.close() }, 500)
}
<!-- 分页器 -->
<Pagination
@pageChange="roomPageChange"
:total="roomTotal" :pageSize="roomPageSize"
/>
- 发送请求的过程
在 vuex 发送请求获取数据,保存数据列表及数据总数。例如发送一个搜索请求,参数:当前页数、每页数量等等,获取的数据中会包含数据总数,所以总页数会自动计算,只需要确定每页数量和数据总数就行。