V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ThinkPad93
V2EX  ›  前端开发

关于树形菜单实现问题

  •  
  •   ThinkPad93 · 2022-05-08 21:50:07 +08:00 · 1365 次点击
    这是一个创建于 911 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    网站地址如下:

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

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

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

    数据结构长这样的

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

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

    8 条回复    2022-05-12 08:23:23 +08:00
    zcf0508
        1
    zcf0508  
       2022-05-08 21:52:25 +08:00 via Android
    组件可以递归
    sunny2580839896
        2
    sunny2580839896  
       2022-05-08 22:04:08 +08:00
    连线是咋实现的
    aikilan
        3
    aikilan  
       2022-05-09 09:08:35 +08:00
    @sunny2580839896 根据层级创建层级 -1 的元素充当线
    Lax
        4
    Lax  
       2022-05-09 09:36:44 +08:00
    CSS 的 :before :after 实现的连线

    #rightContentRef-0 > ul > li:nth-child(1)::after
    @sunny2580839896
    vue666
        5
    vue666  
       2022-05-09 12:55:25 +08:00 via Android
    这些都有现成的插件啊,jq jsTree.js vue react 就更不用说了
    sunny2580839896
        6
    sunny2580839896  
       2022-05-09 13:49:09 +08:00
    @aikilan #3
    @Lax #4 感谢
    ThinkPad93
        7
    ThinkPad93  
    OP
       2022-05-11 20:38:44 +08:00
    @sunny2580839896 v 友也有类似的需求?
    sunny2580839896
        8
    sunny2580839896  
       2022-05-12 08:23:23 +08:00
    @ThinkPad93 #7 没有没有,我不会所以才问下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4909 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 05:39 · PVG 13:39 · LAX 21:39 · JFK 00:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.