element UI 实现 递归渲染表头

场景： 表格 表头数据由后端提供数据，模板需要一层一层循环嵌套，就像递归一样渲染出模板
如图

3321958-b1989052443b33ab.png

表头数据： tableConfig

[{
    "label": "2019年1月xxx资表",
    "prop": "",
    "children": [{
        "label": "表1",
        "prop": "c_0"
    }, {
        "label": "表2",
        "prop": "c_1",
        "children": []
    }, {
        "label": "表3",
        "prop": "c_2",
        "children": [{
            "label": "表4",
            "prop": "c_3",
            "children": []
        },{
            "label": "表5",
            "prop": "c_4",
            "children": []
        }]
    }]
}]

表格数据 tableData

[{
    c_0:'c_0',
    c_1:'c_1',
    c_2:'c_2',
    c_3:'c_3',
    c_4:'c_4'
},
{
    c_0:'a_0',
    c_1:'a_1',
    c_2:'a_2',
    c_3:'a_3',
    c_4:'a_4'
}]

使用的页面

tableColumn.vue

dynamicTable.vue

源码主要来源 :https://www.cnblogs.com/llcdxh/p/9473458.html