el-pagination组件二次封装

1. 最终效果：

2. 新建 PaginationView.vue 文件（子组件）：

<template>
    <div>
        <el-pagination
                :current-page="currentPage" //当前是第几页
                :page-size="pageSize"  //当前按多少条数据一页进行显示，效果图中是20条/页
                :page-sizes="[5, 10, 20, 30]"  //可以选择每个页面显示多少条数据
                background  //当前页背景图
                layout="total, prev, pager, next, sizes, jumper"  //组成部分，total表示总共有多少条数据，prev表示前一页，pager为页码，next为下一页，sizes为可供选择的每页显示的数据条数，jumper为页面跳转
                :total="totalCount" //总数据量
                @size-change="handleSizeChange" //切换每页显示数据量时的回调
                @current-change="handleCurrentChange" //切换页码时的回调
                hide-on-single-page //只有一页数据时不显示页码
        />
    </div>
</template>

<script setup>
import {defineProps, defineEmits} from "vue";

defineProps({
    currentPage: {},
    pageSize: {},
    totalCount: {type: Number},
})


//父组件传过来的方法
const emit = defineEmits(['pageSizeChange', 'pageCurrentChange'])
const handleSizeChange = (val) => {
    emit('pageSizeChange', val)
}
const handleCurrentChange = (val) => {
    emit('pageCurrentChange', val)
}
</script>

3. 父组件进行引用：

<template>
    <div>
        <pagination-view ref="paginationRef"
                         :currentPage="currentPage"
                         :pageSize="pageSize"
                         :totalCount="totalCount"
                         @pageSizeChange="handleSizeChange"
                         @pageCurrentChange="handleCurrentChange"
        />
    </div>
</template>

<script setup>
//引入页码组件
import PaginationView from "@/components/.../PaginationView.vue";
//此处 getBackendImageList 为获取数据的异步方法
import {getBackendImageList} from "@/api";
//因为多个页面用到了页码组件，因此封装了公用的方法统一放在 backendList.js 中
import {tableList} from "@/assets/js/backendList";


//引入该页面需要使用到的方法和变量
const {  
  currentPage,
  totalCount,
  pageSize,
  handleSizeChange,
  handleCurrentChange,
} = tableList(getBackendImageList, 10)
</script>

4. 封装的公用方法文件 backendList.js，一般存放在 /src/assets/js 文件夹下：

export function tableList(getListFn, defaultPageSize = 20) {
    const currentPage = ref(1);
    const totalCount = ref(0);
    const pageSize = ref(defaultPageSize);

    const paramsObj = {};
    const handleSizeChange = async (val) => {
        paramsObj.size = val;
        pageSize.value = val;
        await getListFn(paramsObj);
    }
    const handleCurrentChange = async (val) => {
        paramsObj.page = val;
        await getListFn(paramsObj)
    }

    return {
        currentPage,
        totalCount,
        pageSize,
        handleSizeChange,
        handleCurrentChange,
    }
}