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,
}
}