Element UI 多级表格渲染

// TableColumn.js
function renderColumn(h, column){
    return h{
        'el-table-column',
        {
            props:{
                align:'center',
                ...column
            }
        },
        column&&column.children&&column.children.map(c=> renderColumn(h, c))
    }
}
export default {
    functional: true,
    props: {
        columns: {
            type:Array,
            default: ()=>[]
        }
    },
    render(h, ctx) {
        return ctx.props.columns.map(column => renderColumn(h, column ))
    }

}

// Table.vue
<template>
    <el-table
        ref="elTable"
        :data="list"
        stripe
        border
        height="100%"
    >
        
    </el-table>
</template>
<script>
    import TableColumn from './TableColumn.js'
    const columns = [
        {
            label:'一级',
            children:[
                {
                    label:'二级一',
                    align:'center',
                    prop:'name1'

                },
                {
                    label:'二级二',
                    children:[
                        {    
                            label:'三级一',
                            align:'center',
                            prop:'name2'

                        },
                        {
                            label:'三级二',
                            align:'center',
                            prop:'name3'
                    
                        }
                    ]
                    
                }
            ]
        }
        
    ]
    export default {
        name: "Table",
        data() {
            return {
                list:[]
            }
        }
    }
</script>