动态多级别表头-数据渲染

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对应的字段