el-table 处理表格数据中存在属性值为数组的情况

当返回的数据类型如下:

  tableData: [
        {
          name: '张三',
          occupation: '经理',
          experiences: [
            { id: '123456', project: '香蕉', score: '90' },
            { id: '223456', project: '菠萝', score: '91' },
            { id: '323456', project: '西瓜', score: '95' }

          ],
          gender: '男'
        },
        {
          name: '李四',
          occupation: '技术总监',
          experiences: [
            { id: '123456', project: '香蕉', score: '92' },
            { id: '423456', project: '橘子', score: '93' }

          ],
          gender: '男'
        },
        {
          name: '王二',
          occupation: '技术总监',
          experiences: [
            { id: '123456', project: '香蕉', score: '90' },
            { id: '223456', project: '菠萝', score: '91' },
            { id: '323456', project: '西瓜', score: '95' },
            { id: '423456', project: '橘子', score: '87' }

          ],
          gender: '男'
        }
      ],

展示效果如下

代码如下

<template>
  <div class="home">
    <el-table :data="tableData" stripe style="width: 100%">
 <el-table-column  width="180"
 v-for="(item,idx) in finalColumns" :key='idx' :label='item.label' :prop='item.prop'>
 </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data () {
    return {
      tableData: [
        {
          name: '张三',
          occupation: '经理',
          experiences: [
            { id: '123456', project: '香蕉', score: '90' },
            { id: '223456', project: '菠萝', score: '91' },
            { id: '323456', project: '西瓜', score: '95' }

          ],
          gender: '男'
        },
        {
          name: '李四',
          occupation: '技术总监',
          experiences: [
            { id: '123456', project: '香蕉', score: '92' },
            { id: '423456', project: '橘子', score: '93' }

          ],
          gender: '男'
        },
        {
          name: '王二',
          occupation: '技术总监',
          experiences: [
            { id: '123456', project: '香蕉', score: '90' },
            { id: '223456', project: '菠萝', score: '91' },
            { id: '323456', project: '西瓜', score: '95' },
            { id: '423456', project: '橘子', score: '87' }

          ],
          gender: '男'
        }
      ],
      data: [],
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '应聘职务', prop: 'occupation' },
        { label: '', prop: 'experiences', children: [] },
        { label: '性别', prop: 'gender' }
      ],
      finalColumns: []
    }
  },
  created () {
    let max = 0
    let arr = []
    this.tableData.forEach((ele) => {
      if (max < ele.experiences.length) {
        arr = []
      }
      ele.experiences.forEach((item, idx) => {
        ele[item.id] = item.score ? item.score : '-'
        if (max < ele.experiences.length) {
          const obj = {}
          obj.label = item.project
          obj.prop = item.id
          arr.push(obj)
        }
      })
      if (max < ele.experiences.length) {
        max = ele.experiences.length
      }
    })
    console.log(this.tableData)
    this.columns.forEach(ele => {
      if (ele.prop === 'experiences') {
        ele.children = arr
      }
    })
    this.finalColumns = this.columns.reduce((sum, col) => {
      if (col.children && col.children.length) {
        sum.splice(sum.length, 0, ...col.children.map(v => v))
      } else {
        sum.splice(sum.length, 0, col)
      }
      return sum
    }, [])
    console.log(this.finalColumns, 'columns')
  }
}
</script>