vue3 a-table分页
时间: 2023-10-05 12:07:41 浏览: 50
要在 Vue3 中使用 a-table 分页,可以按照以下步骤进行:
1. 首先安装 a-table 和 element-plus(如果您还没有安装它们):
```
npm install a-table element-plus
```
2. 在您的 Vue3 项目中引入 a-table 和 element-plus:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ATable from 'a-table'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ATable)
app.use(ElementPlus)
app.mount('#app')
```
3. 在您的组件中使用 a-table:
```html
<template>
<div>
<a-table :data="tableData" :columns="columns" :pagination="pagination"></a-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 22 },
{ name: 'Jane', age: 23 },
{ name: 'Tom', age: 25 },
{ name: 'Alice', age: 27 },
{ name: 'Bob', age: 29 }
],
columns: [
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' }
],
pagination: {
pageSize: 3
}
}
}
}
</script>
```
在这个例子中,我们将 `tableData` 作为数据传递给 `a-table` 组件,使用 `columns` 定义表格列的标题和数据索引,然后使用 `pagination` 属性启用分页功能,并设置每页显示的项目数为 3。
这样,您就可以在 Vue3 中使用 a-table 进行分页了!