这篇文章主要讲解了“Ant Design Vue Pagination分页组件怎么封装与使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Ant Design Vue Pagination分页组件怎么封装与使用”吧！
今天封装一个常用的组件 Pagination 分页
因为是 Ant Design Vue 的组件，所以必须安装Ant Design Vue才能使用哦～
使用组件：
计算
安全
数据库
网络和加速
企业服务
$ npm i --save ant-design-vue第一步：首先创建一个组件文件Pagination.vue ，完整代码：
<template>
<div class="mz-antd-pagination">
<a-pagination
v-model="current"
:page-size-options="pageSizeOptions"
:total="total"
show-size-changer
:page-size="pageSize"
@showSizeChange="onShowSizeChange"
>
<template slot="buildOptionText" slot-scope="props">
<span>{{ props.value }}条/页</span>
</template>
</a-pagination>
</div>
</template>
<script>
export default {
props: {
total:{
type: Number,
default: 0
},
pageSizeOptions: {
type: Array,
default() {
return ['10', '20', '30', '40', '50'];
}
},
},
data() {
return {
pageSize: 10,
current: 1
};
},
mounted() {
},
methods: {
onShowSizeChange(current, pageSize) {
this.pageSize = pageSize;
this.current = current;
this.$emit('onShowSizeChange', current, pageSize);
}
},
watch: {
current(val) {
this.$emit('onShowSizeChange', val, this.pageSize);
},
},
};
</script>
<style lang="scss" scoped>
.mz-antd-pagination{
.ant-pagination {
text-align: right !important;
margin-top: 20px !important;
}
}
</style>第二步：使用方法
<template>
<div class="merchandise-news">
<Breadcrumb :routes='routes'></Breadcrumb>
<div class="goods-info">
<div class="table-list">
<!-- 表格 -->
<a-table
:columns="columns"
:data-source="tableData"
:locale='{emptyText:"暂无数据"}'
:pagination="false"
:scroll="{ x: 1300 }">
<!-- <span slot="action" slot-scope="text, record">
<a-button type="link" @click="goEditPage(record)">编辑</a-button>
</span> -->
</a-table>
<!-- 3.页面使用分页组件 -->
<Pagination
v-model="pagination.current"
:total="pagination.totalCount"
show-size-changer
:page-size="pagination.pageSize"
@onShowSizeChange="onShowSizeChange"
></Pagination>
</div>
</div>
</div>
</template>
<script>
import Pagination from "@/components/MzAntD/Pagination"; //1. 引入 Pagination.vue 组件，注意路径哦～
import { getBaseStoreList} from "@/api/storeSmart/baseInfo"
export default {
data() {
return {
//表格数据：
columns: [
{
title:'序号',
customRender: (text, record, index) => `${index + 1}`
},
{
title: '品牌',
dataIndex: 'brand',
key: 'brand',
ellipsis: true,
}
{
title: '状态',
dataIndex: 'statsName',
key: 'statsName',
ellipsis: true,
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'action' },
}
],
// pageSizeOptions: ['10', '20', '30', '40', '50'], //自定义分页
pagination:{ //分页数据
current : 1,
pageSize: 10,
totalCount:500
},
}
},
components:{
Pagination //2. 在components中定义Pagination
},
mounted(){
this.getStoreList()
},
methods:{
// 获取列表
async getStoreList(){
let param = {
pageNo:this.pagination.current,
pageSize: this.pagination.pageSize
};
let res = await getBaseStoreList(param);
let list = res.data.result.list //列表数据
this.tableData = list
this.pagination.totalCount = res.data.result.totalCount //表格长度
},
// 分页改变时调用组件里的方法
onShowSizeChange(current, pageSize) {
console.log(current, pageSize);
this.pagination.current = current
this.pagination.pageSize = pageSize;
//改变完 重新渲染数据
this.getStoreList()
},
}
}
</script>
<style scoped lang="scss">
</style>Ant Design Vue 中的 pagination 组件有一个 pageSize 属性，用于设置每页显示的数据条数。
同时，还有一个 total 属性，用于设置数据总条数。通过计算可以算出分页数，从而实现设置最大分页数的目的。
代码示例：
<a-pagination
:total="total"
:pageSize="pageSize"
@change="handlePageChange"
/>
<script>
export default {
data() {
return {
total: 100,
pageSiz感谢各位的阅读，以上就是“Ant Design Vue Pagination分页组件怎么封装与使用”的内容了，经过本文的学习后，相信大家对Ant Design Vue Pagination分页组件怎么封装与使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/Originally_M/article/details/117125188
