vue递归数据渲染

        递归数据类型常见于菜单数据结构，组织树形结构，今天我们来了解一个简单的方法来渲染这种递归数据结构的数据。

        先来看一段树组件的数据

[{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],

        可以看出，不管是父节点还是子节点所有字段都是一样的，对于这样的数据我们应该如何渲染？

        上代码

created() {
    this.query()
    getTree().then((res) => {
      if (res.code === '200') {
        console.log(res.data)
        this.tree = this.filterTree(res.data)
      }
    })
  },

        说一下这段代码，在created生命周期函数获取树形结构的数据，然后调用filterTree（）方法，并将接口获取的数据传递过去。

 filterTree(tree) {
      return tree.map(item => {
        item = {
          label: item.orgName,
          orgId: item.orgId,
          children: item.children
        }
        if (item.children.length > 0) {
          item.children = this.filterTree(item.children)
        }
        console.log(this.tree)
        return item
      })
    },

        这个方法比较简便的地方在于要是有chidren的话自己调用自己，就不用写很多的循环，写起来非常简便也便于理解。要是你们写树形图基本可以用我的这个代码。

        看到这里啦，还是点个赞支持一下啦！