关于树形菜单实现问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 916 天前的主题，其中的信息可能已经有所发展或是发生改变。

产品出了个需求，想参考目标网站上的树形菜单实现一个这个的功能。

网站地址如下：

看 Network 是一次性把数据请求回来，分一级、二级、三级菜单、...

点击 children 展开下一级，并带上关系（类似 echarts 的树图），直到 children 为空表示没有下一级

数据结构长这样的

data: [
  {
   children: [
     {
       children: [
         {
           children: []
         }
       ]
     }
   ]  
  }
]

求 V 友分析下思路。。并如何实现这个的功能

8 条回复 • 2022-05-12 08:23:23 +08:00

zcf0508

2022-05-08 21:52:25 +08:00 via Android

组件可以递归

sunny2580839896

2022-05-08 22:04:08 +08:00

连线是咋实现的

aikilan

2022-05-09 09:08:35 +08:00

@sunny2580839896 根据层级创建层级 -1 的元素充当线

Lax

2022-05-09 09:36:44 +08:00

CSS 的 :before :after 实现的连线

#rightContentRef-0 > ul > li:nth-child(1)::after
@sunny2580839896

vue666

2022-05-09 12:55:25 +08:00 via Android

这些都有现成的插件啊，jq jsTree.js vue react 就更不用说了

sunny2580839896

2022-05-09 13:49:09 +08:00

@aikilan #3
@Lax #4 感谢

ThinkPad93

2022-05-11 20:38:44 +08:00

@sunny2580839896 v 友也有类似的需求？

sunny2580839896

2022-05-12 08:23:23 +08:00

@ThinkPad93 #7 没有没有，我不会所以才问下