Vue项目的分页组件封装

Vue2项目的分页组件封装

elementui组件的分页封装

<template><el-row class="pagination"><el-pagination@size-change="handleSizeChange":page-sizes="$store.getters.pagination.page_sizes"@current-change="toPage":current-page.sync="mPage":page-size="mPageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-row>
</template><script>
export default {name: 'mPagination',props: {total: {type: Number,required: true,},},data() {return {// 默认页码是1，每页数量是10mPage: 1,mPageSize: this.$store.getters.pagination.pageSize,};},watch: {total(val) {if (this.mPage > 1) {let maxPage = Math.ceil(val / this.mPageSize);if (maxPage < this.mPage) {this.$emit('handleFn', {pageSize: this.mPageSize,page: maxPage,});}}},},methods: {handleSizeChange(pageSize) {this.mPage = 1; // 改变每页的数据条数，就重置到第一页this.$emit('handleFn', {pageSize,page: 1,});},toPage(page) {this.$emit('handleFn', { page });},setData(page) {this.mPage = page;this.toPage(page);},},
};
</script>

在页面中使用

<m-pagination ref="page" :total="total" @handleFn="handleFn"></m-pagination>methods: {search() {this.$refs.page.setData(1);},handleFn(obj) {Object.assign(this.formData, obj);},
},

Vue3项目的分页组件封装

element plus组件的分页封装

<template><el-row class="pagination"><el-pagination :current-page="mPage" :page-size="mPageSize" @current-change="toPage" background="true"layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"></el-pagination></el-row>
</template><script setup>
import { ref } from 'vue';const emit = defineEmits();defineProps({total: {type: Number,required: true,},
})// 页码
let mPage = ref(1);
let mPageSize = ref(10);// 页数
const handleSizeChange = (pageSize) => {mPageSize.value = pageSize;emit('handleFn', {pageSize,page: 1,})
}// 选择页码
const toPage = (page) => {mPage.value = page;emit('handleFn', { page });
}// 筛选重置页码
const setData = (page) => {mPage.value = page;toPage(page);
}// 输出组件的方法，让外部组件可以调用
defineExpose({setData,
})
</script><style lang="scss" scoped>
.pagination {display: flex;flex-wrap: wrap;justify-content: center;margin-top: 32px;
}
</style>

在前台页面上使用

<m-pagination ref="page" :total="state.pageInfo.total" @handleFn="handleFn"></m-pagination>// 重置分页
let page = ref();// 查询条件初始化页码
const getSearch = () => {page.value.setData(1);
}// 获取组件返回的页数或者页码
const handleFn = (obj) => {Object.assign(state.pageInfo, obj);
};