您的位置:首页 > 文旅 > 旅游 > Python私教张大鹏 Vue3整合AntDesignVue之Pagination 分页

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

2024/12/23 16:11:02 来源:https://blog.csdn.net/qq_37703224/article/details/139593330  浏览:    关键词: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默认的每页条数number10
disabled禁用分页boolean-1.5.0
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
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是否显示较少页面内容booleanfalse1.5.0
showQuickJumper是否可以快速跳转至某页booleanfalse
showSizeChanger是否展示 pageSize 切换器,当 total 大于 50 时默认为 trueboolean-
showTotal用于显示数据总量和当前数据顺序Function(total, range)-
simple当添加该属性时,显示为简单分页boolean-
size当为「small」时,是小尺寸分页string“”
total数据总数number0

事件

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com