1.代码结构
<el-table-column width="120" align="center" v-for="colm in changeLabel" :prop="colm.prop" :label="colm.label">
<el-table-column v-for="item in colm.children" :prop="item.prop" :label="item.label">
<template #default="scope">
{{ scope.row[item.prop] }}
</template>
</el-table-column>
</el-table-column>
2.渲染数据结构(changeLabel)的值
[
{
"label": "2023年",
"children": [
{
"prop": "2023-8",
"label": "8月"
},
{
"prop": "2023-9",
"label": "9月"
},
{
"prop": "2023-10",
"label": "10月"
},
{
"prop": "2023-11",
"label": "11月"
}
]
}
]
循环表头,将:label和:prop赋值,再循环children,数据的渲染就是scope每行数据对应的字段,记得先将表格数据转换成和prop对应的字段