element-ui中el-table多层数组渲染问题

如果你想要渲染的表格数据对象里面还有一层数组，类似下面这样的多层数据，该如何做呢？

tableData: [
  {
    name: '国家出资人',
    list: [
      { name: '2011', value: '0' },
      { name: '2012', value: '0' },
      { name: '2013', value: '0' },
      { name: '2014', value: '0' }
    ]
  },
  {
    name: '国有独资公司',
    list: [
      { name: '2011', value: '1' },
      { name: '2012', value: '1' },
      { name: '2013', value: '1' },
      { name: '2014', value: '1' }
    ]
  },
  {
    name: '国有独资企业',
    list: [
      { name: '2011', value: '2' },
      { name: '2012', value: '2' },
      { name: '2013', value: '2' },
      { name: '2014', value: '2' }
    ]
  }
]

实现方法如下：

<el-table :data="tableData">
    <el-table-column align="center" prop="name" label="企业类别">
    </el-table-column>
    <el-table-column align="center" label="企业数量（户）">
    <el-table-column align="center" v-for="(title, index) in tableData[0].list" :key="index" :label="title.name">
        <template slot-scope="scope">
            <span>{{scope.row.list[index].value}}</span>
        </template>
    </el-table-column>
    </el-table-column>
</el-table>

效果图如下：