vue3封装el-pagination分页组件的完整代码
更新时间:2024年02月26日 09:47:02 作者:PXY_J
这篇文章主要介绍了vue3封装el-pagination分页组件的完整代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
1、效果如图:
2、分页组件代码:
<template> <div class="paging"> <el-config-provider :locale="zhCn"> <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize" :background="page.background" :layout="page.layout" :total="page.total" @size-change="page.handleSizeChange" @current-change="page.handleCurrentChange" /> </el-config-provider> </div> </template> <script setup> import { ElConfigProvider } from 'element-plus' import zhCn from 'element-plus/es/locale/lang/zh-cn'; zhCn.el.pagination.goto = "到第" const props = defineProps({ total: { required: true, type: Number, default: 300 }, // 当前页数 currentPage: { type: Number, default: 1 }, // 分页 pageSize: { type: Array, default: () => { return [10, 20, 30, 50, 100] } }, limit: { type: Number, default: 10 }, layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' }, background: { type: Boolean, default: () => { return true }, }, }); const emit = defineEmits(); const currentPage = computed({ get() { return props.currentPage }, set(val) { emit('update:currentPage', val) } }) const pageSize = computed({ get() { return props.limit }, set(val) { emit('update:limit', val) } }) const page = reactive({ background:props.background, currentPage:props.currentPage, pageSize:props.pageSize[0], layout:props.layout, total:props.total, handleSizeChange:(val)=>{ console.log(`${val} items per page`) emit('handleSizeChange', val); }, handleCurrentChange:(val)=>{ console.log(`current page: ${val}`) emit('handleCurrentChange', val); } }); </script> <style lang="scss" scoped> </style>
3、使用代码:
**结构:** <template> <Paging :current-page="page.currentPage" :page-size="page.pageSize" :background="page.background" :layout="page.layout" :total="page.total" :limit="page.limit" @handleSizeChange="page.handleSizeChange" @handleCurrentChange="page.handleCurrentChange" ></Paging> </template> **js:** <script setup> import Paging from "@/components/paging";//引入分页组件 const page = reactive({ layout:'prev, pager, next, jumper', currentPage:1, limit:10, total:300, handleSizeChange:(val)=>{ page.pageSize = val }, handleCurrentChange:(val)=>{ page.currentPage = val } }) </script>
到此这篇关于vue3封装el-pagination分页组件的文章就介绍到这了,更多相关vue3封装el-pagination内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vscode使用Eslint+Prettier格式化代码的详细操作
这篇文章主要介绍了vscode使用Eslint+Prettier格式化代码,本文通过图文示例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
最新评论