应用场景是这样的,根据客户选择城市(树状结构,大概如下所示);展示到页面,也就是说会与好多层,甚至不确定的情况,一开始选择的方式逐层判断,一层层的遍历,然后后来放弃了,想到了写菜单组件的时候使用过的组件 --- 递归组件对没错,这里只需要把数据展开显示就好了,然后就愉快的啪啪啪了,而且不用担心嵌套层次太深,代码结构也相对之前的逐层遍历要简洁; [ { "id": 1, "text": "A", "children": [ { "id": 4, "text": "C[父A]", "children": [ { "id": 7, "text": "F[父C]", "children": [ { "id": 3, "text": "G[父F]", "children": [] } ] }, { "id": 2, "text": "E[父C]", "children": [] } ] } ] }, { "id": 6, "text": "B", "children": [ { "id": 5, "text": "D[父B]", "children": [] } ] } ] 递归组件 代码如下;
组件内定义组件名字 name,接受父组件传递下来的值 model;
父组件中 组成并使用子组件
这样树状结构的数据 cityStr 就可以一层层的被剥离展示到页面了。
时间: 2024-10-22 01:50:22