Python私教张大鹏 Vue3整合AntDesignVue之Pagination 分页

采用分页的形式分隔长列表，每次只加载一个页面。

案例：分页组件

核心代码：

<template><a-pagination v-model:current="current" :total="50" show-less-items />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current = ref(2);
</script>

vue3示例：

<script setup>
import {ref} from 'vue';const current = ref(2);
</script>
<template><a-pagination v-model:current="current" :total="500" show-less-items/>
</template>

案例：改变每页数量

核心代码：

<template><div><a-paginationv-model:current="current1"v-model:pageSize="pageSize"show-size-changer:total="500"@showSizeChange="onShowSizeChange"/><br /><a-paginationv-model:current="current2"show-size-changer:total="500"disabled@showSizeChange="onShowSizeChange"/></div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const pageSize = ref(20);
const current1 = ref(3);
const current2 = ref(4);
const onShowSizeChange = (current: number, pageSize: number) => {console.log(current, pageSize);
};
watch(pageSize, () => {console.log('pageSize', pageSize.value);
});
watch(current1, () => {console.log('current', current1.value);
});
</script>

vue3示例：

<script setup>
import {ref, watch} from 'vue';const pageSize = ref(20);
const current1 = ref(3);// 修改每页数量
const onShowSizeChange = (current, pageSize) => {console.log(current, pageSize);
};// 监听每页数量的改变
watch(pageSize, () => {console.log('pageSize', pageSize.value);
});// 监听当前页的改变
watch(current1, () => {console.log('current', current1.value);
});</script>
<template><div><!--v-model:current="current1"：当前页v-model:pageSize="pageSize"：每页数量show-size-changer：展示切换分页的下拉框:total="500"：数据总数@showSizeChange="onShowSizeChange"：当切换每页数量的时候触发事件--><a-paginationv-model:current="current1"v-model:pageSize="pageSize"show-size-changer:total="500"@showSizeChange="onShowSizeChange"/></div>
</template>

案例：自定义下拉选项

自定义下拉选项，例如添加全部选项

核心代码：

<template><a-paginationv-model:current="current"v-model:page-size="pageSizeRef":page-size-options="pageSizeOptions":total="total"show-size-changer@showSizeChange="onShowSizeChange"><template #buildOptionText="props"><span v-if="props.value !== '50'">{{ props.value }}条/页</span><span v-else>全部</span></template></a-pagination>
</template>
<script lang="ts" setup>
import { ref } from 'vue';const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref(50);
const onShowSizeChange = (current: number, pageSize: number) => {console.log(current, pageSize);pageSizeRef.value = pageSize;
};
</script>

vue3示例：

<script setup>
import {ref} from 'vue';// 下拉选项的值
const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref(50)
;
const onShowSizeChange = (current, pageSize) => {console.log(current, pageSize);pageSizeRef.value = pageSize;
};
</script><template><a-paginationv-model:current="current"v-model:page-size="pageSizeRef":page-size-options="pageSizeOptions":total="total"show-size-changer@showSizeChange="onShowSizeChange"><!--重写下拉选项--><template #buildOptionText="props"><span v-if="props.value !== '50'">{{ props.value }}条/页</span><span v-else>全部</span></template></a-pagination>
</template>

案例：跳转指定页

快速跳转到某一页。

核心代码：

<template><div><a-pagination v-model:current="current1" show-quick-jumper :total="500" @change="onChange" /><br /><a-paginationv-model:current="current2"show-quick-jumper:total="500"disabledshow-less-items@change="onChange"/></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current1 = ref<number>(1);
const current2 = ref<number>(2);
const onChange = (pageNumber: number) => {console.log('Page: ', pageNumber);
};
</script>

vue3示例：

<script setup>
import {ref} from 'vue';const current1 = ref(1);
const onChange = (pageNumber) => {console.log('Page: ', pageNumber);
};
</script>
<template><div><!--show-quick-jumper：展示调整到第几页@change="onChange"：监听页码改变事件--><a-paginationv-model:current="current1"show-quick-jumper:total="500"@change="onChange"/></div>
</template>

案例：控制分页组件大小

迷你版本。

核心代码：

<template><div id="components-pagination-demo-mini"><a-pagination size="small" :total="50" /><a-pagination size="small" :total="50" show-size-changer show-quick-jumper /><a-pagination size="small" :total="50" :show-total="total => `Total ${total} items`" /></div>
</template><style scoped>
#components-pagination-demo-mini .ant-pagination:not(:last-child) {margin-bottom: 24px;
}
</style>

vue3示例：

<template><div id="components-pagination-demo-mini"><a-pagination size="small" :total="50" /><a-pagination size="small" :total="50" show-size-changer show-quick-jumper /><a-pagination :total="50" :show-total="total => `Total ${total} items`" /></div>
</template><style scoped>
#components-pagination-demo-mini .ant-pagination:not(:last-child) {margin-bottom: 24px;
}
</style>

案例：简洁分页

简单的翻页。

核心代码：

<template><a-pagination v-model:current="current" simple :total="50" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current = ref<number>(2);
</script>

vue3示例：

<script setup>
import {ref} from 'vue';const current = ref(2);
</script><template><!--加上simple属性以后声明是简洁分页--><a-pagination v-model:current="current" simple :total="50"/>
</template>

案例：展示总数

通过设置 showTotal 展示总共有多少数据。

核心代码：

<template><div><a-paginationv-model:current="current1"v-model:page-size="pageSize1":total="85":show-total="total => `Total ${total} items`"/><br /><a-paginationv-model:current="current2"v-model:page-size="pageSize2":total="85":show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"/></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current1 = ref<number>(1);
const current2 = ref<number>(2);
const pageSize1 = ref<number>(20);
const pageSize2 = ref<number>(20);
</script>

vue3示例：

<script setup>
import {ref} from 'vue';const current1 = ref(1);
const current2 = ref(2);
const pageSize1 = ref(20);
const pageSize2 = ref(20);
</script>
<template><div><a-paginationv-model:current="current1"v-model:page-size="pageSize1":total="85":show-total="total => `共 ${total} 条`"/><br/><a-paginationv-model:current="current2"v-model:page-size="pageSize2":total="85":show-total="(total, range) => `共${total}(${range[0]}-${range[1]})条`"/></div>
</template>

案例：上一步和下一步

修改上一步和下一步为文字链接。

核心代码：

<template><a-pagination v-model:current="current" :total="500"><template #itemRender="{ type, originalElement }"><a v-if="type === 'prev'">Previous</a><a v-else-if="type === 'next'">Next</a><component :is="originalElement" v-else></component></template></a-pagination>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current = ref(1);
</script>

vue3示例：

<script setup>
import {ref} from 'vue';const current = ref(1);
</script>
<template><a-pagination v-model:current="current" :total="500"><template #itemRender="{ type, originalElement }"><a v-if="type === 'prev'">上一页</a><a v-else-if="type === 'next'">下一页</a><component :is="originalElement" v-else></component></template></a-pagination>
</template>

属性

参数	说明	类型	默认值	版本
current(v-model)	当前页数	number	-
defaultPageSize	默认的每页条数	number	10
disabled	禁用分页	boolean	-	1.5.0
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的结构，可用于优化 SEO	({page, type: ‘page’ | ‘prev’ | ‘next’, originalElement}) => vNode | v-slot	-
pageSize(v-model)	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	string[] | number[]	[‘10’, ‘20’, ‘50’, ‘100’]
responsive	当 size 未指定时，根据屏幕宽度自动调整尺寸	boolean	-	3.1
showLessItems	是否显示较少页面内容	boolean	false	1.5.0
showQuickJumper	是否可以快速跳转至某页	boolean	false
showSizeChanger	是否展示 pageSize 切换器，当 total 大于 50 时默认为 true	boolean	-
showTotal	用于显示数据总量和当前数据顺序	Function(total, range)	-
simple	当添加该属性时，显示为简单分页	boolean	-
size	当为「small」时，是小尺寸分页	string	“”
total	数据总数	number	0

事件

事件名称	说明	回调参数
change	页码或 pageSize 改变的回调，参数是改变后的页码及每页条数	Function(page, pageSize)	noop
showSizeChange	pageSize 变化的回调	Function(current, size)	noop