关于树形菜单实现问题

2022-05-08 21:50:07 +08:00
 ThinkPad93

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

网站地址如下:

https://m.ztrust.com/?#/zgt/course?activeKey=tree

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

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

数据结构长这样的

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

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

1213 次点击
所在节点    前端开发
8 条回复
zcf0508
2022-05-08 21:52:25 +08:00
组件可以递归
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
这些都有现成的插件啊,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 没有没有,我不会所以才问下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/851593

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX