VUE展示一个无限层次的树状数据结构

.demo{padding:5px0;margin:1px10px;text-align:left;font-size:16px;max-width:500px;border-left:1pxdashed#999;&:before{content:'--';display:inline-block;padding:04px;}}做项目的时候会遇到一些树状数据结构，经常用在左侧菜单导航，或者评论引用等，这个数据结构有一个特点我不知道关于它会嵌套多少层，所以用template来展示这样的数据有点tricky。本文梳理了两种展示该数据结构的方法。文章中使用的数据如下：mainData:{value:"root",children:[{value:"Level1-1",children:[{value:"Level2-1",children:[{value:"Level3-1",children:[]}]},{value:"Level2-2",children:[]}]},{value:"Level1-2",children:[]}]这就是下面的样子。组件递归调用第一种方式是组件递归调用自身，创建一个引用自身的组件来显示子组件的数据。子组件如下：导出默认值{name:'treeMain',data(){return{mainData:{value:"root",children:[{value:"1-1级",children:[{value:"2-1级",children:[{value:"3-1级",children:[]}]},{value:"Level2-2",children:[]}]},{value:"Level1-2",children:[]}]}}},components:{"tree-comp":()=>import('./TreeComp')},mounted(){},methods:{}}关于递归组件的内容，官方文档中有提到-->递归组件除了使用render方法使用components方式，还可以使用vue的render方法，利用JavaScript完整的编程能力，实现对树形数据的递归处理，从而展现无限层次的树。如下：.demo{padding:5px0;margin:1px10px;text-align:left;font-size:16px;最大宽度：500px；左边框：1px虚线#999；&:before{content:'--';display:inline-block;padding:04px;}}其中的核心是在render方法中，creatNode方法使用递归的方式遍历树先深入数据，生成vnode，再渲染页面