Vue DevUI
主题

Pagination 分页

分页器。

何时使用

当加载/渲染所有数据将花费很多时间时，可以切换页码浏览数据。

基本用法

size = 'sm'
10
条/页,
所有条目: 306
跳至
页
size = 'md'
10
条/页,
所有条目: 306
跳至
页
size = 'lg'
10
条/页,
所有条目: 306
跳至
页
Custom Style
10
条/页,
所有条目: 306
Jump to
<template> <h5 style="padding: 20px 0 10px;">size = 'sm'</h5> <d-pagination size="sm" :total="pager.total" v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" :max-items="5" /> <h5 style="padding: 20px 0 10px;">size = 'md'</h5> <d-pagination :total="pager.total" v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" :max-items="5" /> <h5 style="padding: 20px 0 10px;">size = 'lg'</h5> <d-pagination size="lg" :total="pager.total" v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" :max-items="5" /> <h5 style="padding: 20px 0 10px;">Custom Style</h5> <d-pagination :total="pager.total" v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" go-to-text="Jump to" :pre-link="preLink" :next-link="nextLink" :max-page="20" /> </template> <script> import { defineComponent, shallowReactive, h } from 'vue'; export default defineComponent({ setup() { const pager = shallowReactive({ total: 306, pageIndex: 5, pageSize: 10, pageSizeOptions: [10, 20, 30, 40, 50], }); const preLink = '<span class="icon-arrow-left"></span>'; const nextLink = '<span class="icon-arrow-right"></span>'; return { pager, preLink, nextLink, }; }, }); </script>

极简模式

极简模式适用于一些有大量信息的页面，可以简化页面的复杂度。

Simple Mode
Total: 306
Super Simple Mode
have-config-menu = "true"
<template> <h5 style="padding: 20px 0 10px;">Simple Mode</h5> <d-pagination :total="pager.total" v-model:pageSize="pager.pageSize" total-item-text="Total" v-model:pageIndex="pager.pageIndex" :can-view-total="true" :can-change-page-size="true" :lite="true" /> <h5 style="padding: 20px 0 10px;">Super Simple Mode</h5> <d-pagination size="sm" :total="pager.total" v-model:pageSize="pager.pageSize" :show-page-selector="false" v-model:pageIndex="pager.pageIndex" :can-change-page-size="true" :lite="true" /> <h5 style="padding: 20px 0 10px;">have-config-menu = "true"</h5> <d-pagination size="sm" :total="pager.total" v-model:pageSize="pager.pageSize" :show-page-selector="false" v-model:pageIndex="pager.pageIndex" :can-change-page-size="true" :lite="true" :have-config-menu="true" > <div class="pagination-config-item"> <div class="config-item-title">show field</div> <div class="config-item-words">setting</div> </div> <div class="pagination-config-item"> <div class="config-item-title">display method</div> <div style="padding-left: 8px; margin-top: 4px"> <i class="icon-list-view"></i> <i class="icon-veIcon-briefcase"></i> </div> </div> </d-pagination> </template> <script> import { defineComponent, shallowReactive } from 'vue'; export default defineComponent({ setup() { const pager = shallowReactive({ total: 306, pageIndex: 5, pageSize: 10, pageSizeOptions: [10, 20, 30, 40, 50], }); return { pager, }; }, }); </script> <style lang="scss"> @import '@devui/theme/styles-var/devui-var.scss'; /* 配置中的每一项，自定义项建议应用此样式或在此基础上修改 */ .pagination-config-item { padding-bottom: 8px; padding-top: 4px; border-bottom: 1px solid $devui-line; } /* 配置中每一项的标题样式，自定义项建议应用此样式或在此基础上修改 */ .config-item-title { color: $devui-line; padding-left: 8px; font-size: $devui-font-size; line-height: 1.5; } .config-item-words { color: $devui-text; padding-left: 8px; font-size: $devui-font-size; margin-top: 4px; } .config-item-words:hover { background-color: $devui-area; cursor: pointer; } </style>

多种配置

支持设置输入跳转、显示跳转按钮；设置 pageSize 等功能。

10
条/页,
所有条目: 306
跳至
页
所有条目: 306
跳至
页
10
条/页,
所有条目: 306
跳至
页
<template> <div style="padding: 20px 0 10px;"></div> <d-pagination size="sm" :total="pager.total" v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :max-items="10" :can-view-total="true" :can-jump-page="true" :can-change-page-size="true" @page-index-change="pageIndexChange" @page-size-change="pageSizeChange" /> <div style="padding: 20px 0 10px;"></div> <d-pagination size="sm" :total="pager.total" v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :max-items="10" :can-view-total="true" :can-jump-page="true" :show-jump-button="true" @page-index-change="pageIndexChange" @page-size-change="pageSizeChange" /> <div style="padding: 20px 0 10px;"></div> <d-pagination size="sm" :total="pager.total" v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :max-items="10" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" :auto-fix-page-index="false" :auto-hide="false" @page-index-change="pageIndexChangeWithoutFix" @page-size-change="pageSizeChangeWithoutFix" :page-size-options="pager.pageSizeOptions" :page-size-direction="['right']" /> </template> <script> import { defineComponent, shallowReactive } from 'vue'; export default defineComponent({ setup() { const pager = shallowReactive({ total: 306, pageIndex: 5, pageSize: 10, pageSizeOptions: [10, 20, 30, 40, 50], }); const pageSizeChange = (val) => { pager.pageIndex = 1; console.log(val, 'pageSizeChange'); }; const pageIndexChange = (val) => { console.log(val, 'pageIndexChange'); }; const pageIndexChangeWithoutFix = (pageIndex) => { console.log(pageIndex, 'pageIndexChangeWithoutFix'); }; const pageSizeChangeWithoutFix = (pageSize) => { pager.pageIndex = 1; console.log(pageSize, 'pageSizeChangeWithoutFix'); }; return { pager, pageSizeChange, pageIndexChange, pageIndexChangeWithoutFix, pageSizeChangeWithoutFix, }; }, }); </script>

特殊情况

特殊场景下分页器的显示。

When the value of pageIndex exceeds the maximum page number, enable show-true-page-index to display the value of pageIndex
10
条/页,
所有条目: 10
跳至
页
When the value of pageIndex exceeds the maximum page number, the show-true-page-index function is disabled and only the maximum page number is displayed.
10
条/页,
所有条目: 10
跳至
页
Default Mode
10
条/页,
所有条目: 0
跳至
页
Simple Mode
total: 0
<template> <h5 style="padding: 20px 0 10px;"> When the value of <code>pageIndex</code> exceeds the maximum page number, enable <code>show-true-page-index</code> to display the value of <code>pageIndex</code> </h5> <d-pagination size="sm" :total="pager1.total" v-model:pageSize="pager1.pageSize" v-model:pageIndex="pager1.pageIndex" :max-items="5" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" :show-true-page-index="true" /> <h5 style="padding: 20px 0 10px;"> When the value of <code>pageIndex</code> exceeds the maximum page number, the <code>show-true-page-index</code> function is disabled and only the maximum page number is displayed. </h5> <d-pagination size="sm" :total="pager2.total" v-model:pageSize="pager2.pageSize" v-model:pageIndex="pager2.pageIndex" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" :max-items="5" :show-true-page-index="false" /> <h5 style="padding: 20px 0 10px;">Default Mode</h5> <d-pagination size="sm" :total="defaultPager.total" v-model:pageSize="defaultPager.pageSize" v-model:pageIndex="defaultPager.pageIndex" :can-view-total="true" :can-change-page-size="true" :can-jump-page="true" :max-items="5" /> <div style="display: flex; margin-top: 10px;"> <d-button bsStyle="primary" circled="true" size="sm" @click="setTotal(0)" width="200">total = 0</d-button> <d-button bsStyle="common" circled="true" size="sm" @click="setTotal(5)" width="200">total = 5</d-button> <d-button bsStyle="common" circled="true" size="sm" @click="setTotal(15)" width="200">total = 15</d-button> </div> <h5 style="padding: 20px 0 10px;">Simple Mode</h5> <d-pagination :total="litePager.total" v-model:pageSize="litePager.pageSize" total-item-text="total" v-model:pageIndex="litePager.pageIndex" :can-view-total="true" :can-change-page-size="true" :lite="true" /> <div style="display: flex; margin-top: 10px;"> <d-button size="sm" @click="setLiteTotal(0)" width="200">total = 0</d-button> <d-button size="sm" @click="setLiteTotal(20)" width="200">total = 20</d-button> <d-button size="sm" @click="setLiteTotal(30000)" width="200">total = 30000</d-button> <d-button size="sm" @click="setLiteTotal(100000)" width="200">total = 100000</d-button> <d-button size="sm" @click="setIndex(2)" width="200">index = 2</d-button> <d-button size="sm" @click="setIndex(3)" width="200">index = 3</d-button> </div> </template> <script> import { defineComponent, shallowReactive } from 'vue'; export default defineComponent({ setup() { const pager1 = shallowReactive({ total: 10, pageIndex: 3, pageSize: 10, }); const pager2 = shallowReactive({ total: 10, pageIndex: 3, pageSize: 10, }); const defaultPager = shallowReactive({ total: 0, pageIndex: 1, pageSize: 10, }); const setTotal = (val) => { defaultPager.total = val; }; const litePager = shallowReactive({ total: 0, pageIndex: 1, pageSize: 10, }); const setLiteTotal = (val) => { litePager.total = val; }; const setIndex = (val) => { litePager.pageIndex = val; }; return { pager1, pager2, defaultPager, setTotal, litePager, setLiteTotal, setIndex, }; }, }); </script>

Pagination 参数

参数类型默认说明跳转 Demo
page-sizenumber10可选，每页显示最大条目数量基本用法
totalnumber0可选，显示的总条目数基本用法
page-size-optionsnumber[]10可选，分页每页最大条目数量的下拉框的数据源，
默认有四种选择 5, 10, 20, 50		多种配置
page-size-directionPageSizeDirection['bottom', 'top']可选，设置分页每页条目的下拉框展示的方向多种配置
page-indexnumber1可选，初始化页码基本用法
max-itemsnumber10可选，分页最多显示几个按钮基本用法
pre-linkstring--可选，上一页按钮显示图标，
默认设置为左箭头图标		基本用法
next-linkstring--可选， 下一页按钮显示图标，
默认设置为右箭头图标		基本用法
size'lg' | 'md' | 'sm'''可选，分页组件尺寸基本用法
can-jump-pagebooleanfalse可选，是否显示分页输入跳转基本用法
can-change-page-sizebooleanfalse可选，是否显示每页最大条目数量的下拉框基本用法
can-view-totalbooleanfalse可选，是否显示总条目基本用法
total-item-textstring'所有条目'可选，总条目文本极简模式
go-to-textstring'跳至'可选，总条目文本基本用法
show-jump-buttonbooleanfalse可选，是否显示跳转按钮多种配置
show-true-page-indexbooleanfalse可选，页码超出分页范围时候也显示当前页码的开关多种配置
litebooleanfalse可选，是否切换为极简模式极简模式
show-page-selectorbooleantrue可选，极简模式下是否显示页码下拉极简模式
have-config-menubooleanfalse可选，极简模式下是否显示配置极简模式
auto-fix-page-indexbooleantrue可选，改变 pageSize 时是否自动修正页码，
若pageSizeChange事件中会对
pageIndex做处理，则推荐设置为false		极简模式
auto-hidebooleanfalse可选，是否自动隐藏，
当 auto-hide 为 true，
并且 pageSizeOptions 最小值大于 total，
则不展示分页		极简模式
max-pagenumber--可选，可展示的分页最大页数基本用法

Pagination 事件

事件名类型说明跳转 Demo
page-index-change(pageIndex: number) => void可选，页码变化的回调,返回当前页码值多种配置
page-size-change(pageSize: number) => void可选，每页最大条目数量变更时的回调，返回当前每页显示条目数多种配置

Pagination 类型定义

AppendToBodyDirection 

type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';

PageSizeDirection 

type PageSizeDirection = 'bottom' | 'top' | 'left' | 'right';
Contributors
粤A2-20044005号