构造tree

代码中树结构的构造,有时候我们使用第三方插件,正常要把后台返回来的数组构造成插件所需要的格式

常规结构如下:

1.title:名称

1.key:键值

1.children:儿子树

1.expand:是否展开

1.isLeaf:是否是叶子节点

代码构造如下:

  let citys = [
      {
        name:'西安',
        key:'xian',
        children:[{
          name:'高新区',
          key:'高新',
          children:[
            {
              name:'小寨',
              key:'xiaozhai',
              children:[]
            },
            {
              name:'纬一街',
              key:'weiyiStreet',
              children:[]
            }
          ]
        }]
      },
      {
        name:'咸阳',
        key:'xianyang',
        children:[{
          name:'新区',
          key:'xin',
          children:[
            {
              name:'彩虹桥',
              key:'caihong',
              children:[]
            },
            {
              name:'下马河',
              key:'xiama',
              children:[]
            }
          ]
        }]
      }
    ]

组装函数如下:

    function makeTree(citys){

      let datas = citys;

      datas.forEach(item => {

        const extra = {
            title:item.name,
            key:item.key,
            isLeaf:!item.children.length
        }

        Object.assign(item,extra);

        if (!extra.isLeaf) {
          makeTree(item.children)
        }

      })

    }
    makeTree(citys)

总结:我们可以用组装好的数组去进行 目录树的渲染,根据对应设置的属性的true或者false去控制目录树的展示!