vue3封装分页组件

1.新建Pagination文件以及该文件夹下新建index.vue

2.在index.vue文件中编写一下代码

<template><div :class="{ 'hidden': hidden }" class="pagination-container"><el-pagination:background="background"v-model:current-page="currentPage"v-model:page-size="pageSize":layout="layout":page-sizes="pageSizes":pager-count="pagerCount":total="+total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script setup>
import { scrollTo } from '@/utils/scroll-to'const props = defineProps({total: {required: true,type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [30, 60, 100]}},// 移动端页码按钮的数量端默认值5pagerCount: {type: Number,default: document.body.clientWidth < 992 ? 5 : 7},layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'},background: {type: Boolean,default: true},autoScroll: {type: Boolean,default: true},hidden: {type: Boolean,default: false}
})const emit = defineEmits();
const currentPage = computed({get() {return props.page},set(val) {emit('update:page', val)}
})
const pageSize = computed({get() {return props.limit},set(val){emit('update:limit', val)}
})
function handleSizeChange(val) {if (currentPage.value * val > props.total) {currentPage.value = 1}emit('pagination', { page: currentPage.value, limit: val })if (props.autoScroll) {scrollTo(0, 800)}
}
function handleCurrentChange(val) {emit('pagination', { page: val, limit: pageSize.value })if (props.autoScroll) {scrollTo(0, 800)}
}</script><style scoped>
.demo-pagination-block {position: fixed;bottom: 20px;right: 20px;width: 50vw;padding-bottom: 20px;background: #fff;z-index: 99;.pagination-container {margin-top: 0;}
}
.pagination-container {background: #fff;padding: 0 16px 20px;
}
.pagination-container.hidden {display: none;
}
</style>

3.使用封装的组件

<div class="demo-pagination-block"><pagination :total="data.total" v-model:page="searchParams.pageNum" v-model:limit="searchParams.pageSize"@pagination="getList" />
</div>

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

import { pageList } from '@/api/dataScheduling/portDataList'const searchParams = reactive({containerNo: '', // 集装箱号searchDate: '', // 筛选时间dataStatus: '', // 状态shipName: '', // 船名destinationPort: '', // 目的港pageNum: 1, // 页码pageSize: 30, // 条数
});const data = reactive({total: 10, // 总条数tableData: [], // 数据列表
});
onMounted(() => {getList();
});// 获取数据列表
const getList = () => {let params = { ...searchParams }pageList(params).then(res => {console.log('获取列表', res);data.tableData = res.rowsdata.total = res.total})
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/102201.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！