Ant Design Vue 动态表头并填充数据

Ant Design Vue 动态表头并填充数据
Ant Design Vue 是基于 Ant Design 的 Vue 版本，它为 Vue.js 提供了一套高质量的 UI 组件库。在本文中，我们将介绍如何使用 Ant Design Vue 创建一个动态表头并填充数据。
首先，确保你已经安装了 Ant Design Vue。如果还没有安装，可以通过以下命令进行安装：
```
npm install ant-design-vue
```
在 main.js 中引入 Ant Design Vue 并注册组件：
```javascript
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
```
接下来，我们创建一个简单的 Vue 组件 DynamicTable.vue，用于展示动态表头和填充数据。
```html
<template>
  <a-table :columns="columns" :dataSource="data" bordered>
    <template v-slot:bodyCell="{ text, record, index, column }">
      <div v-if="column.key === 'operation'">
        <a-button type="primary" @click="editRow(index)">编辑</a-button>
        <a-button type="danger" @click="deleteRow(index)">删除</a-button>
      </div>
      <div v-else>{{ text }}</div>
    </template>
  </a-table>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '操作',
          key: 'operation',
        },
      ],
      data: [
        {
          key: '1',
          name: '张三',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '李四',
          age: 42,
          address: '西湖区湖底公园2号',
        },
        {
          key: '3',
          name: '王五',
          age: 32,
          address: '西湖区湖底公园3号',
        },
      ],
    };
  },
  methods: {
    editRow(index) {
      console.log('编辑第', index, '行');
    },
    deleteRow(index) {
      this.data.splice(index, 1);
    },
  },
};
</script>
```
在上面的代码中，我们定义了一个名为 DynamicTable 的 Vue 组件，使用 Ant Design Vue 的 a-table 组件来展示数据。我们通过 columns 数组定义了表头，data 数组定义了数据。在 a-table 组件中，我们使用 v-slot:bodyCell 插槽来自定义单元格内容。当列的 key 为 'operation' 时，我们展示编辑和删除按钮，否则展示普通文本。
现在，你可以在其他 Vue 组件中引入 DynamicTable 组件，并使用它来展示动态表头和填充数据。
```html
<template>
  <div>
    <dynamic-table></dynamic-table>
  </div>
</template>
<script>
import DynamicTable from './DynamicTable.vue';
export default {
  components: {
    DynamicTable,
  },
};
</script>
```
至此，我们已经成功创建了一个使用 Ant Design Vue 的动态表头并填充数据的 Vue 组件。你可以根据实际需求调整表头和数据的定义，以满足不同的业务场景。