vue手写树形结构

今天项目中有一个三级树形功能，写完自己有想写一个根据数据自动生成的树形结构。
主要的思路：就是树形结构是一个重复的循环的，因此需要遍历自己的组件。只是生成一级的数据，而下面的数据没有生成并且报错了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020031917031867.png)
组件需要一个name属性。
添加一个手风琴的效果
因此最终的代码如下：

<template>
    <div id="children_tree">
        <div v-for="(item, index) in parentTreeData" :key="index">
            <div class="title" @click="showHidden(item, index)">{{item.title}}</div>
            <children v-if="item.children" :parent-tree-data="item.children"></children>
        </div>
    </div>
</template>

<script>
export default {
    name: "children",
    props: {
        parentTreeData: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    methods: {
    	// 展开或者隐藏下级目录
        showHidden(item, index) {
            this.parentTreeData.forEach(value => {
                // parentTreeData[i]的show属性不等于当前数据的isShow属性那么menuList[i]等于false
                if (value.isShow !== this.parentTreeData[index].isShow) {
                    value.isShow = false;
                }
            });
            item.isShow = !item.isShow;
        }
    }
}
</script>

下面是我模拟的数据结构：

 treeList: [
                {
                    id: 1,
                    title: "第一级",
                    children: [
                        {
                            id: 1.2,
                            title: "第二级",
                            // children: [
                            //     {
                            //         id: 1.3,
                            //         title: "第三级"
                            //     }
                            // ]
                        }
                    ]
                },
                {
                    id: 2,
                    title: "第一级",
                    children: [
                        {
                            id: 2.2,
                            title: "第二级",
                            children: [
                                {
                                    id: 2.3,
                                    title: "第三级"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 3,
                    title: "第一级",
                    children: [
                        {
                            id: 3.2,
                            title: "第二级",
                            children: [
                                {
                                    id: 3.3,
                                    title: "第三级"
                                }
                            ]
                        }
                    ]
                }
            ]

这里只是简单完成递归的逻辑，后面等有时间再把样式添加上去