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 组件。你可以根据实际需求调整表头和数据的定义，以满足不同的业务场景。