vue3项目之Pagination 组件

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 发送请求获取数据，保存数据列表及数据总数。例如发送一个搜索请求，参数：当前页数、每页数量等等，获取的数据中会包含数据总数，所以总页数会自动计算，只需要确定每页数量和数据总数就行。