arco design vue组件库table中的分页器如何使用
时间: 2023-12-02 17:03:22 浏览: 605
arco design vue组件库中的table分页器可以通过以下步骤进行使用:
- 在需要使用分页器的页面中引入Table组件和Pagination组件:
<template>
<div>
<a-table :columns="columns" :data-source="dataSource"></a-table>
<a-pagination :current="current" :total="total" @change="onChange"></a-pagination>
</div>
</template>
<script>
import { Table, Pagination } from '@arco-design/web-vue'
export default {
components: {
Table,
Pagination
},
data() {
return {
columns: [...],
dataSource: [...],
current: 1,
total: 50
}
},
methods: {
onChange(page) {
this.current = page
// TODO: 根据当前页码获取数据
}
}
}
</script>
- 在Table组件中设置
pagination
属性为false
,关闭Table内部的分页器:
<a-table :columns="columns" :data-source="dataSource" :pagination="false"></a-table>
- 在Pagination组件中设置
current
和total
属性,分别为当前页码和总数据量,并监听change
事件,当页码变化时调用onChange
方法,根据新的页码获取数据并更新Table组件的数据源和分页器的当前页码。
以上就是arco design vue组件库table中的分页器的基本使用方法。
相关推荐
















