js和vue创建渲染树形结构数据

js创建渲染树形结构数据

js创建渲染树形结构

树形结构数据

let data = [
  {
    "id": 1,
    "label": "菜单1",
    "children": [
      {
        "id": 2,
        "label": "菜单1-1",
        "children": [
          {
            "id": 3,
            "label": "菜单1-1-1",
          },
          {
            "id": 4,
            "label": "菜单1-1-2",
          }
        ],
      },
      {
        "id": 5,
        "label": "菜单1-2",
        "children": [
          {
            "id": 6, 
            "label": "菜单1-2-1", 
          },
          {
            "id": 7, 
            "label": "菜单1-2-2", 
          },
        ],
      },
    ]
  },
  {
    "id": 7,
    "label": "菜单2",
    "children": [
      {
        "id": 8,
        "label": "菜单2-1",
        "children": [
          {
            "id": 9,
            "label": "菜单2-1-1",
          },
          {
            "id": 10,
            "label": "菜单2-1-2",
          }
        ],
      },
    ]
  },
  {
    "id": 11,
    "label": "菜单3"
  }
]

js中通过数据中是否有子节点children来判断是否递归创建渲染子节点

// js创建渲染树形结构数据
let oDiv=document.querySelector('#tree')

function appendTree(data,oDiv){
  let htmlStr='<ul>'
  const addTree=(arr)=>{
    arr.forEach(item=>{
      // 创建当前节点
      htmlStr+=`<li><a href="javascript:;">${item.label}</a>`
      if(item.children&&item.children.length>0){
        // 如果有子节点，先把ul创建到当前节点中
        htmlStr+='<ul>'
        addTree(item.children)
        // 创建完后把尾部标签加上
        htmlStr+='</ul></li>'
      }else{
        // 没有子节点，直接把尾部标签加上
        htmlStr+='</li>'
      }
    })
  }
  addTree(data)
  // 最后把外部尾部标签加上
  oDiv.innerHTML=htmlStr+'</ul>'
}
appendTree(data,oDiv)

vue创建渲染树形结构

1. 组件tree

<!-- 树形组件 -->
<template>
  <ul>
    <li v-for="(item,index) in treeData" :key="index">
      <a href="javascript:;">{{item.label}}</a>
      <Tree v-if="item.children&&item.children.length>0" :treeData="item.children"/>
    </li>
  </ul>
</template>

<script setup name="tree">
  // 引用自己，如果有子节点，就继续渲染
  import Tree from '@/components/tree'

  defineProps({
    treeData:{
      type: Array,
      require: true,
      default: []
    }
  })
 

</script>
<style scoped lang="less">
</style>

2. 外部父组件调用组件tree

<template>
  <Tree :treeData="data"/>
</template>
<script setup>
import Tree from "@/components/tree"

let data = [
  {
    "id": 1,
    "label": "菜单1",
    "children": [
      {
        "id": 2,
        "label": "菜单1-1",
        "children": [
          {
            "id": 3,
            "label": "菜单1-1-1",
          },
          {
            "id": 4,
            "label": "菜单1-1-2",
          }
        ],
      },
      {
        "id": 5,
        "label": "菜单1-2",
        "children": [
          {
            "id": 6,  
            "label": "菜单1-2-1", 
          },
          {
            "id": 7, 
            "label": "菜单1-2-2", 
          },
        ],
      },
    ]
  },
  {
    "id": 7,
    "label": "菜单2",
    "children": [
      {
        "id": 8,
        "label": "菜单2-1",
        "children": [
          {
            "id": 9,
            "label": "菜单2-1-1",
          },
          {
            "id": 10,
            "label": "菜单2-1-2",
          }
        ],
      },
    ]
  },
  {
    "id": 11,
    "label": "菜单3"
  }
]
</script>

<style>
</style>