element-ui中el-table多層陣列渲染問題
阿新 • • 發佈:2022-04-11
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>
效果圖如下: