antd vue table 封装

Ant Design 是一个非常流行的 UI 框架，它提供了很多实用的组件，包括 Table 表格组件。在 Vue 项目中使用 Ant Design 的 Table 组件时，可以考虑封装一个通用的 Table 组件，方便在不同的页面中复用。

下面是一个简单的 Ant Design Vue Table 封装：

<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 即可：

<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 封装。