Zlpt_Portal/src/components/PagingComponent/index.vue

<script setup lang="ts">
    // 每页数量值改变
    const handleSizeChange = (val: Number) => {
        emit('update:pageSize', val)
        // 传递每页数量
        emit('getListChange')
    }
    // 页码值改变
    const handleCurrentChange = (val: Number) => {
        emit('update:pageNum', val)
        // 传递页码值
        emit('getListChange')
    }

    const props = withDefaults(
        defineProps<{
            page?: number
            size?: number
            total?: number
        }>(),
        {
            page: 1,
            size: 10,
            total: 0
        }
    )

    const emit = defineEmits(['getListChange', 'update:pageSize', 'update:pageNum'])

    const currentPage = computed({
        get: () => {
            return props.page
        },
        set: (val: number) => {
            emit('update:pageNum', val)
        }
    })
    const pageSize = computed({
        get: () => {
            return props.size
        },
        set: (val: number) => {
            emit('update:pageSize', val)
        }
    })

    // const paginationData = reactive({
    //     pageSize: Props.pageSize,
    //     pageNumber: Props.pageNumber
    // })

    // const handleTotalText = () => {
    //     const targetDom: any = document.querySelector('.el-pagination__total')
    //     targetDom.innerText = `数量${total.value}`
    // }
    // onMounted(() => {
    //     // handleTotalText()
    // })
</script>

<template>
    <!-- 分页 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 40]"
        small="small"
        background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>

<style>
    .el-pagination {
        margin-top: 15px;
    }
</style>