先说下原生如何遍历一个左树结构，然后创建左树：

        const treeData = () => [{ //约定的数据结构
            id: 1,
            name: "第一层",
            children: [{
                name: "第二层"
            }, {
                name: "第二层"
            }, {
                name: "第二层"
            }]
        }, {
            id: 1,
            name: "第一层",
            children: [{
                name: "第二层"
            }, {
                name: "第二层",
                children: [{
                    name: "第三层"
                }, {
                    name: "第三层"
                }, {
                    name: "第三层"
                }]
            }, {
                name: "第二层",
                children: [{
                    name: "第三层"
                }, {
                    name: "第三层"
                }, {
                    name: "第三层",
                    children: [{
                        name: "第四层"
                    }, {
                        name: "第四层"
                    }, {
                        name: "第四层",
                        children: [{
                            name: "第五层"
                        }, {
                            name: "第五层"
                        }, {
                            name: "第五层"
                        }]
                    }]
                }]
            }]
        }];

        function createTree(data) {
            let root = document.createDocumentFragment(); //创建一个fragemeng
            data.forEach((item, index, arr) => {
                let ele = document.createElement('ul');
                let child = document.createElement('li');
                child.textContent = `${item.name}`
                ele.append(child);
                if (item.children) {
                    ele.append(createTree(item.children))
                };
                root.append(ele);
            })


            return root;
        }
        let testTree = createTree(treeData());
        document.body.append(testTree)

看下效果：

然后在vue中去实现

<template>
<!-- home.vue -->
    <div class="home">
        <ul v-for="(item, index) in treeData" :key="index">
            <li>{{item.name}}</li>
            <Home v-if="item.children" :treeData = 'item.children'/>
        </ul>
    </div>
</template>

<script>
const treeData = () => [
    {
        id: 1,
        name: "第一层",
        children: [
            {
                name: "第二层"
            },
            {
                name: "第二层"
            },
            {
                name: "第二层"
            }
        ]
    },
    {
        id: 1,
        name: "第一层",
        children: [
            {
                name: "第二层"
            },
            {
                name: "第二层",
                children: [
                    {
                        name: "第三层"
                    },
                    {
                        name: "第三层"
                    },
                    {
                        name: "第三层"
                    }
                ]
            },
            {
                name: "第二层",
                children: [
                    {
                        name: "第三层"
                    },
                    {
                        name: "第三层"
                    },
                    {
                        name: "第三层",
                        children: [
                            {
                                name: "第四层"
                            },
                            {
                                name: "第四层"
                            },
                            {
                                name: "第四层",
                                children: [
                                    {
                                        name: "第五层"
                                    },
                                    {
                                        name: "第五层"
                                    },
                                    {
                                        name: "第五层"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
];
export default {
    name: "Home",
    props: {
        treeData: {
            type: Array,
            // required: true,
            default: treeData
        }
    }
};
</script>

整体思路就是：

1. 先确定上面说的数据结构
2. 循环创建一个ul节点,在ul节点里面创建一个li标签，代表这个树的层
3. 递归创建, 递归的条件就是是否存在children
4. 最后将创建好的所有元素包裹在一个元素内添加到页面上。

参考文献

juejin.cn/post/684490…