在项目中，如果每个列表页面都要写一遍分页方法，就会造成大量的代码冗余。在网上也有不少的

封装案例，但大多都不符合vue3语法糖的最新格式，没多少内容，直接上干货。

封装分页子组件 pageination.vue

<template>
    <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.currentPage"
            :page-size="pageParams.pagesize"
            :page-sizes="pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script setup>
    import { ref, reactive, defineEmits, defineProps } from 'vue';
    const emits  = defineEmits(['pageChange']);
    const props = defineProps({
        total: {
            type: Number,
            default: ''
        },
    })
    const pageParams = reactive({
        currentPage: 1,
        pageSize: 10,
    })
    const pageSizes = ref([1,2,30,50,100]);

    //改变每页展示的数据条数 
    const handleSizeChange = (val)=>{
        pageParams.pageSize = val;
        emits('pageChange', pageParams);
    }
    //改变当前页的页码
    const handleCurrentChange = (val)=>{
        pageParams.currentPage = val;
        emits('pageChange', pageParams);
    }

</script>

在页面中引用，这里也可以在main.js中进行全局挂载，就不需要单独在引入了，但这样做有一个坏处如果全局挂载的组件较多，会在一定程度上影响项目运行速度，我这里是在页面中按需引入。

页面引入分页组件

<template>
    <div class="viewBox">
        <div class="tabBox">
            <el-table border empty-text="暂无数据" height="100%" ref="tableTree" max-height="100%" :data="tableData" v-loading="loading" row-key="id">
                
            </el-table>
            <div class="pageBox">
                <pageination :total="total" @pageChange="handleChangePage"></pageination>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        name:"Administrators"
    }
</script>
<script setup>
    import { getCurrentInstance, onActivated, reactive, ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import pageination from '@/components/Pageination/pageination.vue'
    
    const {proxy} = getCurrentInstance();

    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref('');


    
    
    //获取用户列表 
    const getList = ()=>{

    }

    const handleChangePage = (item)=>{
        currentPage.value = item.currentPage;
        pageSize.value = item.pageSize;
        getList();
    }  

</script>