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]
}