在 Vue3 中，结合
Ant Design Vue (
ant-
design-vue) 实现分页表格通常需要以下几个步骤：
1. 安装依赖：首先确保已经安装了 Vue 和
antd-
design-vue，可以
使用 `npm` 或 `yarn` 来安装：
```bash
npm install vue@^3.0
antd @
ant-
design/icons
# 或者
yarn add vue@next
antd @
ant-
design/icons
```
2. 导入组件：在你的 `.vue` 文件中导入需要的组件，如 `Table`, `Pagination` 和 `Icon`：
```javascript
import { Table, Pagination } from '
ant-
design-vue';
import PlusOutlined from '@
ant-
design/icons/PlusOutlined';
```
3. 创建数据源：你可以创建一个虚拟的数据数组，模拟分页效果：
```javascript
const dataSource = Array.from({ length: 50 }, (_, index) => ({
key: `${index}`,
name: `Name ${index + 1}`,
age: `Age ${index + 1}`,
address: `Address ${index + 1}`,
}));
```
4.
使用 `v-model` 绑定分页插件，并监听它的变化事件来动态加载数据：
```html
<template>
<div>
<a-icon :type="currentMode === 'prev' ? 'chevron-left' : 'chevron-right'" slot="prev" @click="changePage(-1)" />
<Pagination :total="total" :current="currentPage" @on-change="changePage" />
<Table :data="filteredData" :columns="columns" :pagination="pagination" />
<a-icon type="plus" @click="addRow" />
</div>
</template>
// ...
data() {
return {
currentPage: 1,
pageSize: 10,
dataSource,
total: dataSource.length,
columns: [
// ...你的列配置
],
pagination: {
pageSizes: [10, 20, 30], // 可选分页大小选项
},
};
},
methods: {
changePage(page) {
this.currentPage = page;
},
filteredData() {
return this.dataSource.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
},
addRow() {
this.dataSource.push({
// ...添加新的行数据
});
this.total++;
}
}
```
5. 根据需求定制表头、排序、搜索等功能，如果需要。
扫一扫
2594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
