Ant Design 是一个非常流行的 UI 框架，它提供了很多实用的组件，包括
Table 表格组件。在
Vue 项目中使用 Ant Design 的
Table 组件时，可以考虑封装一个通用的
Table 组件，方便在不同的页面中复用。
下面是一个简单的 Ant Design
Vue Table 封装：
```
vue
<template>
<a-
table :columns="columns" :dataSource="dataSource">
<a-pagination :total="total" :current="current" :pageSize="pageSize" @change="handlePageChange" />
</a-
table>
</template>
<script>
import {
Table, Pagination } from 'ant-design-
vue';
export default {
name: '
AntdTable',
components: {
Table, Pagination },
props: {
columns: {
type: Array,
required: true,
},
dataSource: {
type: Array,
required: true,
},
total: {
type: Number,
required: true,
},
current: {
type: Number,
required: true,
},
pageSize: {
type: Number,
required: true,
},
},
methods: {
handlePageChange(pageNumber) {
this.$emit('page-change', pageNumber);
},
},
};
</script>
```
在这个组件中，我们使用了 Ant Design
Vue 提供的
Table 和 Pagination 组件。组件接受了五个 props：columns、dataSource、total、current 和 pageSize，分别对应
Table 组件和 Pagination 组件的属性。在 handlePageChange 方法中，我们触发了一个自定义事件 page-change，这个事件可以在父组件中监听并处理分页请求。
使用这个组件时，只需要传入相应的 props 即可：
```
vue
<template>
<div>
<
AntdTable :columns="columns" :dataSource="dataSource" :total="total" :current="current" :pageSize="pageSize" @page-change="handlePageChange" />
</div>
</template>
<script>
import
AntdTable from '@/components/
AntdTable';
export default {
components: {
AntdTable },
data() {
return {
columns: [...],
dataSource: [...],
total: 100,
current: 1,
pageSize: 10,
};
},
methods: {
handlePageChange(pageNumber) {
console.log('Page changed:', pageNumber);
},
},
};
</script>
```
这样，我们就完成了一个简单的 Ant Design
Vue Table 封装。
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
