ThinkPad93

关于树形菜单实现问题

  •  
  •   ThinkPad93 · May 8, 2022 · 2110 views
    This topic created in 1482 days ago, the information mentioned may be changed or developed.

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

    网站地址如下:

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

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

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

    数据结构长这样的

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

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

    8 replies    2022-05-12 08:23:23 +08:00
    zcf0508
        1
    zcf0508  
       May 8, 2022 via Android
    组件可以递归
    univ
        2
    univ  
       May 8, 2022
    连线是咋实现的
    aikilan
        3
    aikilan  
       May 9, 2022
    @sunny2580839896 根据层级创建层级 -1 的元素充当线
    Lax
        4
    Lax  
       May 9, 2022
    CSS 的 :before :after 实现的连线

    #rightContentRef-0 > ul > li:nth-child(1)::after
    @sunny2580839896
    vue666
        5
    vue666  
       May 9, 2022 via Android
    这些都有现成的插件啊,jq jsTree.js vue react 就更不用说了
    univ
        6
    univ  
       May 9, 2022
    @aikilan #3
    @Lax #4 感谢
    ThinkPad93
        7
    ThinkPad93  
    OP
       May 11, 2022
    @sunny2580839896 v 友也有类似的需求?
    univ
        8
    univ  
       May 12, 2022
    @ThinkPad93 #7 没有没有,我不会所以才问下
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3409 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 00:17 · PVG 08:17 · LAX 17:17 · JFK 20:17
    ♥ Do have faith in what you're doing.