正常使用elementUI的el-table时，其绑定的数据是一个对象数组，如果这个数组中的对象又包含一层对象数组，直接去渲染则无法实现，比如这种数据：
const staticData= [{
"departmentName": "abc",
"monthData": [{
"complianceRate": 0.0,
"monthOrWeekOrDay": "1"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "2"
},
...
]'=
},
....
}]
此时需要处理一下，可以在data中使用新的数组来作为label，使得内层数据可以同行显示。
代码如下，另外加一个columnIndex数组，用来存储数据里面的属性的key。
效果图：可以看到，monthData里面的数据也渲染到表格里面了
代码：
<template>
<el-table :data="tableData" border>
<el-table-column
label="公司"
prop="departmentName">
</el-table-column>
<el-table-column
key="年"
label="每月达标率（%）">
<el-table-column v-for="(item,index) in months" :key="item" :label="item">
<template slot-scope="scope">
<span>{
{
scope.row.monthData[index].complianceRate}}</span>
</template>
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
data(){
const staticData= [{
"departmentName": "abc",
"monthData": [{
"complianceRate": 0.0,
"monthOrWeekOrDay": "1"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "2"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "3"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "4"
}, {
"complianceRate": 82.71,
"patrolLength": "62151.00",
"actualPatrol": "51403.77",
"monthOrWeekOrDay": "5"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "6"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "7"
}, {
"complianceRate": 33.0,
"monthOrWeekOrDay": "8"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "9"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "10"
}, {
"complianceRate": 13.0,
"monthOrWeekOrDay": "11"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "12"
}],
}, {
"departmentName": "bcd",
"monthData": [{
"complianceRate": 0.0,
"monthOrWeekOrDay": "1"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "2"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "3"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "4"
}, {
"complianceRate": 69.68,
"patrolLength": "55661.00",
"actualPatrol": "38784.54",
"monthOrWeekOrDay": "5"
}, {
"complianceRate": 88.0,
"monthOrWeekOrDay": "6"
}, {
"complianceRate": 77.0,
"monthOrWeekOrDay": "7"
}, {
"complianceRate": 66.0,
"monthOrWeekOrDay": "8"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "9"
}, {
"complianceRate": 44.0,
"monthOrWeekOrDay": "10"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "11"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "12"
}],
}, {
"departmentName": "efg",
"monthData": [{
"complianceRate": 0.0,
"monthOrWeekOrDay": "1"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "2"
}, {
"complianceRate": 43.0,
"monthOrWeekOrDay": "3"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "4"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "5"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "6"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "7"
}, {
"complianceRate": 0.0,
"monthOrWeekOrDay": "8"
}, {
"complianceRate": 4.0,
"monthOrWeekOrDay": "9"
}, {
"complianceRate": 88.0,
"monthOrWeekOrDay": "10"
}, {
"complianceRate": 6.0,
"monthOrWeekOrDay": "11"
}, {
"complianceRate": 77.0,
"monthOrWeekOrDay": "12"
}],
}]
return{
// 有两层数据，渲染表格
months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
tableData:staticData,
}
}
}
</script>
<style>
</style>