如何用el-table动态渲染列？

Question

1、后端返回数据格式（列是动态的，可能还会有“收入d”等等）：
[
  {name:"张三",id:1,sex:1,"收入a":"12"},
  {name:"张四",id:2,sex:2,"收入a":"43","收入b":"66"},
  {name:"张五",id:3,sex:2,"收入c":"55"}
]
2、要求前端展示效果：

备注：后台返回动态的列，有中文英文字段，另外，如果张三没有“收入b”、“收入c”等字段，则默认为空值。

目前我的处理方式：先处理数据，求出需要渲染的表头（看来跟大家的思路还是一致的）。发出来只是想集思广益，看看各位大神有没有更好的处理方式和思路。

Answer 1

参考：功能

Answer 2

根据后台返回的字段名动态设置表头

Answer 3

这个你首先需要求出动态列的所有值，然后在表头循环出来，然后有值的显值，没值的空就行了，首先你要循环出有多少个值。

 <el-table-column  
        v-for="(item,index) in attrColum" 
        :key="item.index" 
        :label="item.label" 
        :prop="item.prop" 
        align="center">
 </el-table-column>

this.attrColum=[]
    {label:'收入a',prop:incomeA},
    {label:'收入b',prop:incomeB},
    {label:'收入c',prop:incomeC},
    ....

像我上面的代码

Answer 4

能不能把写好的代码贴一下，借鉴一下

Answer 5

动态渲染表头