vue antdesgin table 动态表头动态数据示例

以下是一个基于 Vue 和 Ant Design Vue 的示例，可以动态生成表格的表头和数据：

<template>
  <div>
    <a-button @click="addColumn">添加列</a-button>
    <a-table :columns="columns" :dataSource="dataSource"></a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        }
      ],
      dataSource: [
        {
          name: '张三',
          age: 25
        },
        {
          name: '李四',
          age: 28
        }
      ]
    }
  },
  methods: {
    addColumn() {
      const newColumn = {
        title: `列 ${this.columns.length + 1}`, // 动态生成列名
        dataIndex: `col_${this.columns.length + 1}`, // 动态生成列的数据键名
        key: `col_${this.columns.length + 1}`
      }
      this.columns.push(newColumn)
      // 随机生成一条数据，对应新增的列
      const newData = {
        name: `用户 ${this.dataSource.length + 1}`,
        age: Math.floor(Math.random() * 20) + 20,
        [`col_${this.columns.length}`]: Math.floor(Math.random() * 100) + 1 // 对应新增的列的值
      }
      this.dataSource.push(newData)
    }
  }
}
</script>

这个示例中，通过 addColumn 方法动态添加列，每次添加时生成一个新的列名和列数据键名，并把新列添加到表头中。同时，随机生成一条新数据，对应新增的列的值。通过这种方式实现了动态表头和动态数据。