Ant Design Vue Pagination分页组件的封装与使用
作者：最初都是小白
这篇文章主要介绍了Ant Design Vue Pagination分页组件的封装与使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Ant Design Vue Pagination分页组件的封装与使用
今天封装一个常用的组件 Pagination 分页
因为是 Ant Design Vue 的组件，所以必须安装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的最大分页数
Ant Design Vue 中的 pagination 组件有一个 pageSize 属性，用于设置每页显示的数据条数。
同时，还有一个 total 属性，用于设置数据总条数。通过计算可以算出分页数，从而实现设置最大分页数的目的。
代码示例：
<a-pagination
:total="total"
:pageSize="pageSize"
@change="handlePageChange"
/>
<script>
export default {
data() {
return {
total: 100,
pageSiz总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。