Arco Design的表格(Table)分页数据怎么配置/设置

发布于:2025-06-24 ⋅ 阅读:(21) ⋅ 点赞:(0)

Arco Design的表格(Table)分页数据怎么配置/设置

在这里插入图片描述

官方表格(Table)地址:https://arco.design/vue/component/table#API

参数名 描述 类型 默认值 版本
pagination 分页的属性配置 `boolean PaginationProps` true
page-position 分页选择器的位置 `‘tl’ ‘top’ tr’

官网只给了2两句提示,但是没有给具体说明:

如:pagination参数值PaginationProps类型时,PaginationProps的对象有那些字段?

我详细翻了文档,我想着既然是分页数据,一定和分页数据有关,就是翻了翻分页组件

分页组件:分页 Pagination

<pagination> Props

参数名 描述 类型 默认值 版本
total (必填) 数据总数 number -
current (v-model) 当前的页数 number -
default-current 默认的页数(非受控状态) number 1
page-size (v-model) 每页展示的数据条数 number -
default-page-size 默认每页展示的数据条数(非受控状态) number 10
disabled 是否禁用 boolean false
hide-on-single-page 单页时是否隐藏分页 boolean false
simple 是否为简单模式 boolean false
show-total 是否显示数据总数 boolean false
show-more 是否显示更多按钮 boolean false
show-jumper 是否显示跳转 boolean false
show-page-size 是否显示数据条数选择器 boolean false
page-size-options 数据条数选择器的选项列表 number[] [10, 20, 30, 40, 50]
page-size-props 数据条数选择器的Props SelectProps -
size 分页选择器的大小 'mini' , 'small' , 'medium' , 'large' 'medium'
page-item-style 分页按钮的样式 CSSProperties -
active-page-item-style 当前分页按钮的样式 CSSProperties -
base-size 计算显示省略的基础个数。显示省略的个数为 baseSize + 2 * bufferSize number 6
buffer-size 显示省略号时,当前页码左右显示的页码个数 number 2
auto-adjust 是否在改变数据条数时调整页码 boolean true 2.34.0

那么表格的pagination参数值为PaginationProps类型时,对象值是多少呢?

total: { //数据总数
	type: Number,
	required: true
},
current: Number, //当前的页数
defaultCurrent: { //默认的页数(非受控状态)
	type: Number,
	default: 1
},
pageSize: Number, //每页展示的数据条数
defaultPageSize: { //默认每页展示的数据条数(非受控状态)
	type: Number,
	default: 10
},
disabled: { //是否禁用
	type: Boolean,
	default: false
},
hideOnSinglePage: { //单页时是否隐藏分页
	type: Boolean,
	default: false
},
simple: { //是否为简单模式
	type: Boolean,
	default: false
},
showTotal: { //是否显示数据总数
	type: Boolean,
	default: false
},
showMore: { //是否显示更多按钮
	type: Boolean,
	default: false
},
showJumper: { //是否显示跳转
	type: Boolean,
	default: false
},
showPageSize: { //是否显示数据条数选择器
	type: Boolean,
	default: false
},
pageSizeOptions: { //数据条数选择器的选项列表
	type: Array,
	default: () => [10, 20, 30, 40, 50]
},
pageSizeProps: { //数据条数选择器的Props
	type: Object
},
size: { //分页选择器的大小
	type: String
},
pageItemStyle: { //分页按钮的样式
	type: Object
},
activePageItemStyle: { //当前分页按钮的样式
	type: Object
},
baseSize: { // 计算显示省略的基础个数。显示省略的个数为 `baseSize + 2 * bufferSize`
	type: Number,
	default: 6
},
bufferSize: { // 显示省略号时,当前页码左右显示的页码个数
	type: Number,
	default: 2
},
autoAdjust: { // 是否在改变数据条数时调整页码
	type: Boolean,
	default: true
}

我的使用

<a-table 
        :data="data" 
        style="margin-top: 30px" 
        :bordered="{wrapper:true,cell:true}"
        :stripe="true"
        :column-resizable="true"
        :pagination="pageConfig.pagination" 
        :page-position="pageConfig.pagePosition"
        @page-size-change="pageSizeChangeFun">
</a-table>
const {
createApp,
ref,
reactive,
onMounted
} = Vue;
var app = createApp({
components: {},
setup() {
	const pageConfig=reactive({
		pagination:{
			total:0,
			pageSize:10,
			simple:false,
			showTotal:true,
			showMore:false,
			showJumper:true,
			showPageSize:true,
			pageSizeOptions:[10, 20, 30, 40, 50],
			size:'medium'
		},
		pagePosition: 'top'
	});

	const pageSizeChangeFun=(v1)=>{
		pageConfig.pagination.pageSize=v1;
	};
	//组件初始化后-执行
	onMounted(async () => {

	});
	return {
		pageConfig,
		pageSizeChangeFun
	}
}
}).use(ArcoVue).use(ArcoVueIcon).mount('#app');

网站公告

今日签到

点亮在社区的每一天
去签到