vue+Element-ui的el-table的多级内容渲染问题

tableData: [
					{
						name: 'Huawei P40',
						properties: [
							{
								description: '颜色',
								value: '红色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					},
					{
						name: '小米10',
						properties: [
							{
								description: '颜色',
								value: '黑色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					}
				]

<template>
	<el-table :data="tableData" border>
		<el-table-column label="手机">
			<template slot-scope="scope">
				<span>{{scope.row.name}}</span>
			</template>
		</el-table-column>
		<el-table-column v-for="(item, index) in columnIndex" :key="index" :label="item">
	        <template slot-scope="scope">
				<span>{{scope.row.properties[index].value}}</span>
			</template>		
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		data() {
			return {
				// 有两层数据，渲染表格
				columnIndex: ['颜色','内存'],
				tableData: [
					{
						name: 'Huawei P40',
						properties: [
							{
								description: '颜色',
								value: '红色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					},
					{
						name: '小米10',
						properties: [
							{
								description: '颜色',
								value: '黑色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					}
				]
			}
		}
	}
</script>

<style>
</style>

// 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>