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

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #name="{ text }">
      <a-tooltip placement="topLeft">
        <template #title>
          <span>{{ text }}</span>
        </template>
        <span>{{ text }}</span>
      </a-tooltip>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [],
      dataSource: []
    };
  },
  mounted() {
    // 模拟动态生成的表头和数据
    this.columns = [
      { title: '姓名', dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' } },
      { title: '年龄', dataIndex: 'age', key: 'age' },
      { title: '性别', dataIndex: 'gender', key: 'gender' }
      // 在这里可以动态添加更多的表头字段
    ];
    this.dataSource = [
      { key: '1', name: 'John Brown', age: 32, gender: '男' },
      { key: '2', name: 'Jim Green', age: 42, gender: '男' },
      { key: '3', name: 'Joe Black', age: 32, gender: '男' }
      // 在这里可以动态添加更多的数据
    ];
  }
};
</script>

在这个示例中，我们利用了 columns 和 dataSource 这两个数据属性来动态生成表头和填充数据。你可以根据实际需求，通过修改 columns 和 dataSource 的值来动态改变表格的结构和内容。此外，我们还利用了 scopedSlots 来自定义表格内容的渲染，比如在姓名字段添加了一个 tooltip。