GovUI

Pagination 分页 ​

基础用法 ​

使用 v-model / modelValue 快速绑定当前页码。

控制台
 currentPage: 1 
 total: 100
查看代码
vue
<template>
	<demo-container>
		<gov-pagination v-model="currentPage" :total="total" />
		<template #console>
			currentPage: {{ currentPage }} <br />
			total: {{ total }} <br />
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const currentPage = ref(1);
const total = ref(100);
</script>

设置分页 ​

可以通过 v-model:page-size 设置当前分页大小（对应下拉框值）；通过设置 page-sizes 可设置分页大小选择器内的 options。

控制台
 pageSize: 20 
 pageSizes: [
  20,
  40,
  60
] 
 currentPage: 1 
 total: 100
查看代码
vue
<template>
	<demo-container>
		<gov-pagination
			v-model="currentPage"
			v-model:page-size="pageSize"
			:total="total"
			:page-sizes="pageSizes"
		/>
		<template #console>
			pageSize: {{ pageSize }} <br />
			pageSizes: {{ pageSizes }} <br />
			currentPage: {{ currentPage }} <br />
			total: {{ total }} <br />
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const pageSize = ref(20);
const pageSizes = ref([20, 40, 60]);
const currentPage = ref(1);
const total = ref(100);
</script>

朴素模式 ​

朴素模式只有简单的分页分页列表、前一页、后一页；

控制台
 currentPage: 1 
 total: 100
查看代码
vue
<template>
	<demo-container>
		<gov-pagination plain v-model="currentPage" :total="total" />
		<template #console>
			currentPage: {{ currentPage }} <br />
			total: {{ total }} <br />
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const currentPage = ref(1);
const total = ref(100);
</script>

禁用模式 ​

禁用时分页不可选择。

控制台
 currentPage: 1 
 total: 100
查看代码
vue
<template>
	<demo-container>
		<gov-pagination
			plain
			disabled
			v-model="currentPage"
			:total="total"
		/>
		<hr />
		<gov-pagination
			disabled
			v-model="currentPage"
			:total="total"
		/>
		<template #console>
			currentPage: {{ currentPage }} <br />
			total: {{ total }} <br />
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const currentPage = ref(1);
const total = ref(100);
</script>

背景色 ​

设置背景色风格。

控制台
 currentPage: 1 
 total: 100
查看代码
vue
<template>
	<demo-container>
		<gov-pagination plain background v-model="currentPage" :total="total" />
		<hr />
		<gov-pagination background v-model="currentPage" :total="total" />
		<template #console>
			currentPage: {{ currentPage }} <br />
			total: {{ total }} <br />
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const currentPage = ref(1);
const total = ref(100);
</script>

自定义 ​

自定义上下页。

控制台
 currentPage: 1 
 total: 100
查看代码
vue
<template>
	<demo-container>
		<gov-pagination v-model="currentPage" :total="total">
			<template #prev>上一页</template>
			<template #next>下一页</template>
		</gov-pagination>
		<template #console>
			currentPage: {{ currentPage }} <br />
			total: {{ total }} <br />
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const currentPage = ref(1);
const total = ref(100);
</script>

Attributes ​

属性名说明类型可选值默认值
modelValue（v-model）当前页码Number—1
pageSize（v-model:pageSize）每页显示条数Number—10
pageSizes每页大小选项数组Array—[10, 20, 30, 40]
disabled是否禁用分页Booleantrue, falsefalse
background是否显示背景Booleantrue, falsefalse
plain是否为朴素模式Booleantrue, falsefalse
total总条数Number—0

Events ​

事件名说明回调参数
update:modelValue当前页码改变时触发新的页码
update:pageSize每页大小改变时触发新的每页大小
sizeChange每页大小改变时触发新的每页大小
currentChange当前页码改变时触发新的页码

Slots ​

插槽名说明作用域插槽内容
total自定义总条数显示是可以自定义总条数的显示方式，提供了 total 作为作用域插槽属性
prev自定义上一页按钮内容否可以自定义上一页按钮的内容
next自定义下一页按钮内容否可以自定义下一页按钮的内容

Released under the MIT License.