轉換效果

initDat=[
  {
    title: '節點1',
    pkey: '-1',
    key: '2'，
  },
  {
    title: '節點2',
    pkey: '2',
    key: 'test1',
  },
  {
    title: '節點3',
    pkey: '2',
    key: 'test2',
  }
]
轉換為：
data=[
  {
    title: '節點1',
    pkey: '-1',
    key: '2'，
    children: [
      {
        title: '節點2'
 
,
        pkey: '2',
        key: 'test1',
      },
      {
        title: '節點3',
        pkey: '2',
        key: 'test2',
      }
    ]
  }
]

使用情況

antd的Tree元件

處理函式

    /**
    * @param data 簡單物件陣列
    */
   createTreeData(data) {
    this.treeData = [] 
    if (data.length > 0) {
      for (const n of data) {
        if
 
 (n.pkey === '-1') {
          const obj = {
            title: n.title,
            pkey: n.pkey,
            key: n.key,
          }
          this.treeData.push( obj )
        }
      }
      this.run(data, this.treeData)  
    } else {
      console.log('遍歷物件不是一個數組或為一個空陣列')
    }     
    return
 
 this.treeData
  }

  /**
   * 遞迴方法 找chiArr的所有子節點
   * @param resData 
   * @param chiArr 
   */
  run(resData, chiArr) {
    if (resData.length !== 0) {                     
      if (chiArr) {            
          for (const value2 of resData) {
            if (value.key === value2.pkey) {
              const obj = {
                title: value2.title,
                pkey: value2.pkey,
                key: value2.key,
              }
              /*如果該節點沒有children節點則建立一個，再新增資料，
              如果有就直接新增資料*/
              if (!value.children) {
                value.children = []
              }
              value.children.push(obj)
            }
          }
          this.run(resData, value.children)
        }
      }
    }
  }
  /**
   * 生成資源目錄UI效果
   */
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          // dataRef={item}
          <TreeNode title={item.title} key={item.key} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        )
      }
      return <TreeNode title={item.title} key={item.key} />
    })
  }

其他方法記錄

  /**
   * 刪除陣列中指定值的元素
   * @param arr 陣列
   * @param val 要刪除的值
   */
  deleteArrayItemByValue = (arr, val) => {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] === val) {
        arr.splice(i, 1)
        break
      }
    }
  }