使用JavaScript怎么實(shí)現(xiàn)一個(gè)無(wú)限層級(jí)的樹(shù)形數(shù)據(jù)結(jié)構(gòu)？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)公司專注于海鹽企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。海鹽網(wǎng)站建設(shè)公司,為海鹽等地區(qū)提供建站服務(wù)。全流程按需定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

js代碼：把扁平數(shù)據(jù)轉(zhuǎn)成樹(shù)形數(shù)據(jù)

function setTreeData(source){
  let cloneData = JSON.parse(JSON.stringify(source))   // 對(duì)源數(shù)據(jù)深度克隆
  return cloneData.filter(father=>{           // 循環(huán)所有項(xiàng)，并添加children屬性
    let branchArr = cloneData.filter(child=> father.id == child.parentId);  // 返回每一項(xiàng)的子級(jí)數(shù)組
    branchArr.length>0 ? father.children=branchArr : ''  //給父級(jí)添加一個(gè)children屬性，并賦值
    return father.parentId==0;   //返回第一層
  });
}

根據(jù)網(wǎng)友給我指出的問(wèn)題，之前的算法會(huì)影響到源數(shù)據(jù)，之后我對(duì)獲取的數(shù)據(jù)進(jìn)行了深度克隆，完美解決。

封裝函數(shù)：

function treeData(source, id, parentId, children){  
  let cloneData = JSON.parse(JSON.stringify(source))
  return cloneData.filter(father=>{
    let branchArr = cloneData.filter(child => father[id] == child[parentId]);
    branchArr.length>0 ? father[children] = branchArr : ''
    return father[parentId] == 0    // 如果第一層不是parentId=0，請(qǐng)自行修改
  })
}
 
// 調(diào)用時(shí)，字段名以字符串的形式傳參，如treeData(source, 'id', 'parentId', 'children')

實(shí)例1：使用element-ui的組件制作一個(gè)樹(shù)形多級(jí)嵌套伸縮菜單欄

實(shí)現(xiàn)效果：

vue組件：

<template>
 <el-tree
  :data="treeData"
  :props="defaultProps"
  accordion
  @node-click="handleNodeClick">
 </el-tree>
</template>
 
<script>
  export default {
    name: "Test",
   data(){
    return {
     data : [
      {id:1,parentId:0,name:"一級(jí)菜單A",rank:1},
      {id:2,parentId:0,name:"一級(jí)菜單B",rank:1},
      {id:3,parentId:0,name:"一級(jí)菜單C",rank:1},
      {id:4,parentId:1,name:"二級(jí)菜單A-A",rank:2},
      {id:5,parentId:1,name:"二級(jí)菜單A-B",rank:2},
      {id:6,parentId:2,name:"二級(jí)菜單B-A",rank:2},
      {id:7,parentId:4,name:"三級(jí)菜單A-A-A",rank:3},
      {id:8,parentId:7,name:"四級(jí)菜單A-A-A-A",rank:4},
      {id:9,parentId:8,name:"五級(jí)菜單A-A-A-A-A",rank:5},
      {id:10,parentId:9,name:"六級(jí)菜單A-A-A-A-A-A",rank:6},
      {id:11,parentId:10,name:"七級(jí)菜單A-A-A-A-A-A-A",rank:7},
      {id:12,parentId:11,name:"八級(jí)菜單A-A-A-A-A-A-A-A",rank:8},
      {id:13,parentId:12,name:"九級(jí)菜單A-A-A-A-A-A-A-A-A",rank:9},
      {id:14,parentId:13,name:"十級(jí)菜單A-A-A-A-A-A-A-A-A-A",rank:10},
     ],
     defaultProps: {
      children: 'children',
      label: 'name'
     }
    }
   },
   computed:{
    treeData(){
     let cloneData = JSON.parse(JSON.stringify(this.data))  // 對(duì)源數(shù)據(jù)深度克隆
     return cloneData.filter(father=>{        
      let branchArr = cloneData.filter(child=>father.id == child.parentId)  //返回每一項(xiàng)的子級(jí)數(shù)組
      branchArr.length>0 ? father.children = branchArr : ''  //如果存在子級(jí)，則給父級(jí)添加一個(gè)children屬性，并賦值
      return father.parentId==0;   //返回第一層
     });
    }
   },
   methods:{
    handleNodeClick(data){
     // console.log(data)
     console.log(this.treeData)
    }
   },
   mounted(){
   }
  }
</script>
 
<style scoped>
 
</style>

看完上述內(nèi)容，你們掌握使用JavaScript怎么實(shí)現(xiàn)一個(gè)無(wú)限層級(jí)的樹(shù)形數(shù)據(jù)結(jié)構(gòu)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前標(biāo)題：使用JavaScript怎么實(shí)現(xiàn)一個(gè)無(wú)限層級(jí)的樹(shù)形數(shù)據(jù)結(jié)構(gòu)-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://chinadenli.net/article30/dheepo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、企業(yè)網(wǎng)站制作、自適應(yīng)網(wǎng)站、虛擬主機(jī)、面包屑導(dǎo)航、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)