Tree 树形控件

Posted 2020-10-31 ahao68

一、如何实现点击某一级再请求下一级数据展示

答：通过handleNodeClick事件获取当前点击节点，判断该节点下是否有子集且子集是否有内容（后台返回上级数据会给字段表明是否还有子集），请求数据并将数据直接push进该节点下的子集数组，根据对象的按值传递原理，整个树形结构对象会自动更改，无须自己匹配数据应该放在哪个层级。

       后台至少每次返回两层级的数据，否则会出现节点需要点击两次才可展开层级，一次是请求数据，二次是打开层级。

// 后台第一次给的数据格式
data: [
        {
          a: ‘一级 1‘,
          id: ‘0‘,
          has: true,
          children: [
            {
              a: ‘二级 0-0‘,
              id: ‘0-0‘,
              preid: ‘0‘,
              has: true,
              children: []
            }
          ]
        }
      ]

    // --点击节点事件
    handleNodeClick(data) {
      console.log(‘当前点击的节点‘, data)
      if (data.has && data.children.length === 0) {
       // push请求到的数据
        data.children.push({
          id: 244,
          a: ‘三级 2-1-1‘,
          has: true,
          children: []
        })
        console.log(‘插入内容后的当前节点‘, data)
      }
    }