Pagination 分页

分页组件，用于显示和操作分页数据，支持多种配置，包括尺寸、展示模式、页码类型等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="分页" class='p.30'>
		<t-card class="mb.30" title="Pagination 分页" sub-title="数据量大,数据分页加载.."></t-card>
		<template v-if="area==1">
			<t-section title="默认+全部功能开启+主题展示" class="mb.30"></t-section>
			<t-pagination class="mb.30" :total="total" type="normal" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="primary" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="error" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="warning" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="success" :current="current"></t-pagination>
		</template>
		<template v-if="area==2">
			<t-section title="图标模式" class="mb.30"></t-section>
			<t-pagination class="mb.30" :total="total" type="normal" mode="2" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="primary" mode="2" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="error" mode="2" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="warning" mode="2" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="success" mode="2" :current="current"></t-pagination>
		</template>
		<template v-if="area==3">
			<t-section title="禁用首页未页按钮" class="mb.30"></t-section>
			<t-pagination class="mb.30" :total="total" type="normal" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="primary" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="error" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="warning" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30" :total="total" type="success" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current"></t-pagination>
		</template>
		<template v-if="area==4">
			<t-section title="禁用上一页下一页按钮" class="mb.30"></t-section>
			<t-pagination class="mb.30-h.70" :total="total" type="normal" mode="2" :showFirstButton="false"
				:showPreButton="false" :showNextButton="false" :showLastButton="false"
				:current="current"></t-pagination>
			<t-pagination class="mb.30-h.70" :total="total" type="primary" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current" :showPreButton="false"
				:showNextButton="false"></t-pagination>
			<t-pagination class="mb.30-h.70" :total="total" type="error" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current" :showPreButton="false"
				:showNextButton="false"></t-pagination>
			<t-pagination class="mb.30-h.70" :total="total" type="warning" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current" :showPreButton="false"
				:showNextButton="false"></t-pagination>
			<t-pagination class="mb.30-h.70" :total="total" type="success" mode="2" :showFirstButton="false"
				:showLastButton="false" :current="current" :showPreButton="false"
				:showNextButton="false"></t-pagination>
		</template>
		<template v-if="area==5">
			<t-section title="禁用首页未页按钮" class="mb.30"></t-section>
			<t-pagination class="mb.30-w.250" :total="total" type="normal" mode="2" pageType="1"
				:showFirstButton="false" :showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30-w.250" :total="total" type="primary" mode="2" pageType="1"
				:showFirstButton="false" :showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30-w.250" :total="total" type="error" mode="2" pageType="1" :showFirstButton="false"
				:showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30-w.250" :total="total" type="warning" mode="2" pageType="1"
				:showFirstButton="false" :showLastButton="false" :current="current"></t-pagination>
			<t-pagination class="mb.30-w.250" :total="total" type="success" mode="2" pageType="1"
				:showFirstButton="false" :showLastButton="false" :current="current"></t-pagination>
		</template>
		<template v-if="area==6">
			<t-section title="主题-尺寸-mini" class="mb.30"></t-section>
			<t-pagination class="mb.30" :total="total" type="primary" :current="current" size="mini"></t-pagination>
			<t-section title="主题-尺寸-small" class="mb.30"></t-section>
			<t-pagination class="mb.30" :total="total" type="error" :current="current" size="small"></t-pagination>
			<t-section title="主题-尺寸-medium" class="mb.30"></t-section>
			<t-pagination class="mb.30" :total="total" type="warning" :current="current" size="medium"></t-pagination>
			<t-section title="主题-尺寸-large" class="mb.30"></t-section>
			<t-pagination class="mb.30" :total="total" type="success" :current="current" size="large"></t-pagination>
		</template>
		<t-row class='ffww-tdb-tdr-tdp'>
			<t-button type="p" class="mr.30-mb.30" size="small" @click="area=1">默认+全部功能开启</t-button>
			<t-button type="e" class="mr.30-mb.30" size="small" @click="area=2">图标模式</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=3">禁用首页未页按钮</t-button>
			<t-button type="w" class="mr.30-mb.30" size="small" @click="area=4">禁用上一页下一页按钮</t-button>
			<t-button type="p" class="mr.30-mb.30" size="small" @click="area=5">简约模式</t-button>
			<t-button type="e" class="mr.30-mb.30" size="small" @click="area=6">主题尺寸展示</t-button>
		</t-row>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				area: 6,
				current: 15,
				total: 300,
			}
		},
		methods: {

		},
		onReady() {

		}
	}
</script>

Props

名称	描述	类型	默认值
size	分页组件的尺寸	String	'mini'
mode	展示模式，1表示文字按钮，2表示图标按钮	String	'1'
type	分页组件的类型	String	'p'
pageType	页码展示类型，1表示简约型，2表示展开型	String	'2'
preText	上一页的文本	String	'上一页'
nextText	下一页的文本	String	'下一页'
showPreButton	是否显示上一页按钮	Boolean	true
showNextButton	是否显示下一页按钮	Boolean	true
current	当前页码	Number	1
total	数据总量	Number	0
pageSize	每页数据量	Number	10
firstText	首页的文本	String	'首页'
lastText	末页的文本	String	'末页'
showFirstButton	是否显示首页按钮	Boolean	true
showLastButton	是否显示末页按钮	Boolean	true

Events

名称	描述	参数
change	当前页码发生变化时触发	当前页码