VUE构建树

后台返回的是一个集合，每条数据带有父子节点的结构，类似于这样的，子数据的parentId = 父数据的id

 这里有三层结构，那么如何使用vue形成树呢？

首先调用后台接口，拿到集合，然后将getTree()方法的返回值赋值给

treeData即可。

export function getTree (query) {
  return getList(query).then(res => {
    if (res && res.code === 200 && res.result && res.result.records && res.result.records.length) {
      var arr = []
      if (res.result.records.length > 1) {
        res.result.records.forEach((d, i) => {
          d.key = d.id
          d.value = d.id
          d.title = d.name
          d.name = d.name
          d.id = d.id
          d.parentId = d.parentId
          if (i > 0) {
            arr.push(d)
          }
        })
        res.result.records[0].children = setTree(arr.reverse(), res.result.records[0].id)
        return [res.result.records[0]]
      }
    }
  })
}

export function setTree (nodes, parentid) {
  function cmp (a, b) {
    return a.parentId - b.parentId
  }
  nodes.sort(cmp)
  var midObj = {}
  // 从后向前遍历
  for (var i = nodes.length - 1; i >= 0; i--) {
    var nowPid = nodes[i].parentId
    var nowId = nodes[i].id
    // 建立当前节点的父节点的children 数组
    if (midObj[nowPid]) {
      midObj[nowPid].push(nodes[i])
    } else {
      midObj[nowPid] = []
      midObj[nowPid].push(nodes[i])
    }
    // 将children 放入合适的位置
    if (midObj[nowId]) {
      nodes[i].children = midObj[nowId]
      delete midObj[nowId]
    }
  }
  return midObj[parentid]
}