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

使用Ant Design Vue框架的Table组件时，我们通过配置Table组件的colums属性来生成表头

const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' },
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

但是，当我们做智能表单项目的需求是，我们要根据数据库储存的JSON对象动态的生成表头。

当时脑子里的第一个想法是，在拿到后台传过来的JSON数据之后在JS中根据JSON对象创建一个新的colums，然后生成动态的表头。这样做肯定是没有问题的，代码省略。

但是后来采取了循环创建 a-table-column 的方式来实现动态表头。个人感觉这样更符合逻辑一些

         
     
              
                
                  
                    
                      {{ getTableContent(record,item.id) }}
                    
                  
                
              

这样就搞定了！