树型图
本示例是一个简单的树形视图实现,它展现了组件的递归使用。
mycode pen:https://codepen.io/chentianwei411/pen/KGKQxE
重点:递归是如何形成的。嵌套组件!!
如果不使用嵌套组件,而使用<li>元素的话,不会形成递归效果。
基本结构:
//组件模版结构:最外层根元素是<li>,这也是形成递归效果的必要元素。
<li>
<div></div> //显示对象的children元素,一个数组。
<ul> //显示children元素的子元素,都是对象。
<组件></组件> //使用自身组件,形成递归效果。
<li></li>
</ul>
</li>
功能:
- 单击子元素,显示/隐藏 子元素。
- 双击子元素,如果子元素不是folder,则把它的格式改为数组[],并附加一个子元素对象。
- 单击加号+,附加一个子元素对象。
实现思路:
首先,演示数据data是一个多层嵌套的对象结构。但每层只有name和children两个key/value对儿。
其次,构思基本结构。如上图所示