vue+element ui表格动态加载表头

1、需求：统计每个人员折叠不同品类箱子的个数

2、后台返回数据

（1）箱子品类的列表（品类是动态数据，只能单独获取）

boxTypeData: [
    { id: 1, typeName: '品类1' },
    { id: 2, typeName: '品类2' },
    { id: 5, typeName: '品类3' },
    { id: 6, typeName: '品类4' },
    { id: 7, typeName: '品类5' },
    { id: 8, typeName: '品类6' }
],

（2）统计出的人员及对应箱子的个数列表

listData: [
    {
      username: '人员1',
      list: {
        1: 55,
        2: 11,
        5: 10,
        6: 11,
        7: 55,
        8: 52
      }
    },
    {
      username: '人员2',
      list: {
        1: 25,
        2: 21,
        5: 20,
        6: 21,
        7: 25,
        8: 22
      }
    }
]

3、实现

（1）页面结构

<el-table :data="listData">
  <el-table-column label="员工姓名" align="center">
    <template slot-scope="scope">
      <div>{{ scope.row.username }}</div>
    </template>
  </el-table-column>
  <el-table-column
    v-for="(item, index) in header"
    :key="index"
    :label="item"
    align="center"
  >
    <template slot-scope="scope">
      <span>{{ scope.row.list[item] }}</span>
    </template>
  </el-table-column>
</el-table>

（2）方法实现

for (const item of this.listData) {
  const keyValues = this.boxTypeData.map(label => {
    for (const key in item.list) {
      if (label.id == key) {
        const newKey = label.typeName
        return { [newKey]: item.list[key] }
      }
    }
  })
  item.list = Object.assign({}, ...keyValues)
  this.header = Object.keys(item.list)
}