这篇文章主要介绍“Vue3.x+Element Plus如何实现分页器组件”，在日常操作中，相信很多人在Vue3.x+Element Plus如何实现分页器组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue3.x+Element Plus如何实现分页器组件”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
开发中难免会遇到宽度很窄的列表需要使用分页器的情况，这时若使用Element Plus组件的分页器会导致分页器内容超出展示的区域，而Element Plus组件中目前没有Acro Design那样小巧的分页器（Arco Design Vue）如下图所示，如果再引入一个新的UI组件库未免导致项目臃肿，所以基于Vue3.x和Element Plus封装了一个即拿即用的”简洁模式“分页器组件以便不时之需
分页器组件代码部分：
<!-- （简洁模式）分页器组件 --><template> <div class="smallpagination"> <!-- 总数统计 --> <span>{{ '共' + total + '条' }}</span> <!-- 翻页 --> <div class="smallpagination-pager"> <!-- 左翻页 --> <el-icon @click="pageTurning('down')" :class="curPage <= 1 ? 'forbid-pageturning' : ''"> <ArrowLeft /> </el-icon> <!-- 页码 --> <el-input-number @change="handlePageChange" v-model="pageNum" :min="1" :max="pageTotal" :step-strictly="true" :controls="false" /> <b>{{ '/ ' + pageTotal }}</b> <!-- 右翻页 --> <el-icon @click="pageTurning('up')" :class="curPage >= pageTotal ? 'forbid-pageturning' : ''"> <ArrowRight /> </el-icon> </div> </div></template><script setup>import { useAttrs, computed, ref } from 'vue';import { ArrowLeft, ArrowRight} from '@element-plus/icons-vue';// 接收父组件参数const attrs = useAttrs();// 父组件事件const em = defineEmits(['handlePageChange']);// 当前页const pageNum = ref(1);// 父组件传递-当前页码const curPage = computed(() => { pageNum.value = attrs.curPage; return attrs.curPage;});// 父组件传递-总数const total = computed(() => { return attrs.total;});// 总页码数const pageTotal = computed(() => { return attrs.total > 0 ? Math.ceil(attrs.total / attrs.pageSize) : 1;});const handlePageChange = (e) => { if (pageTotal.value <= 1) { return; } em('handlePageChange', e);};const pageTurning = (type) => { // 向前翻页 if (type === 'up') { if (curPage.value >= pageTotal.value || pageTotal.value <= 1) { return; } em('handlePageChange', pageNum.value + 1); } // 向后翻页 else { if (pageTotal.value <= 1 || curPage.value <= 1) { return; } em('handlePageChange', pageNum.value - 1); }};</script><style lang="less" scoped>.smallpagination { width: auto; height: 100%; display: flex; align-items: center; >span { margin-right: 11px; font-size: 14px; font-weight: 400; color: #4E5969; line-height: 21px; } .smallpagination-pager { display: flex; align-items: center; .el-icon { width: 30px; height: 30px; font-size: 14px; color: #4E5969; cursor: pointer; &:hover { background: rgb(247, 248, 250); color: #0082ff; } } .forbid-pageturning { opacity: 0.4; cursor: not-allowed; &:active { color: #4E5969; background: rgb(255, 255, 255); } } >b { margin: 0 5px; font-size: 14px; font-weight: 400; color: #4E5969; } }}</style><style lang="less">.smallpagination { .smallpagination-pager { .el-input-number { width: 40px; margin-left: 5px; span { display: none; } .el-input__wrapper { padding: 0; height: 30px; font-size: 14px; box-sizing: border-box; background: #f2f3f5; box-shadow: none !important; } } }}</style>使用简洁模式分页器组件代码如下：
<template> <div class="xxx-list"> ... <div class="list-bottom-common-page"> <SmallPagination :total="total" :curPage="curPage" :pageSize="pageSize" @handlePageChange="handleCurrentChange"> </SmallPagination> </div> </div></template><script setup>import SmallPagination from '@/components/xxx/SmallPagination.vue';import { ref } from 'vue';// 当前页const curPage = ref(1);// 每页条数const pageSize = ref(20);// 列表总数const total = ref(0);const handleCurrentChange = (val) => { curPage.value = val; ...};</script>最终效果如下：
到此，关于“Vue3.x+Element Plus如何实现分页器组件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
