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>

效果图如下：