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>

效果圖如下：