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');