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>

效果图如下:

avatar

文章来自(https://lifangdan.github.io/blog/views/frontEnd/vue/table.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容