前端vue3.0递归实现实现树形结构侧边栏

实现效果

测试数据tree.json

[
  {
    "nodeid": "777718a5-18a8-4955-928a-64b683513590",
    "parentid": "",
    "nodename": "目录1",
    "children": [
      {
        "nodeid": "b278006e-cb28-4459-8f1a-e42202a96ce8",
        "parentid": "777718a5-18a8-4955-928a-64b683513590",
        "nodename": "目录1-1"
      }
    ]
  },
  {
    "nodeid": "c47d3f14-9b78-46fc-ad76-52e5d4df2ef7",
    "parentid": "",
    "nodename": "目录2",
    "children": [
      {
        "nodeid": "7c913e5d-0ec0-4152-b183-b001d6d92ed8",
        "parentid": "c47d3f14-9b78-46fc-ad76-52e5d4df2ef7",
        "nodename": "目录2-1"
      },
      {
        "nodeid": "f1844722-ecaa-4e10-86f1-b64e3352d5ea",
        "parentid": "c47d3f14-9b78-46fc-ad76-52e5d4df2ef7",
        "nodename": "目录2-2"
      },
      {
        "nodeid": "ffff9811-ac84-41d9-b4d6-bcb98bf0196f",
        "parentid": "c47d3f14-9b78-46fc-ad76-52e5d4df2ef7",
        "nodename": "目录2-3"
      }
    ]
  },
  {
    "nodeid": "f59286d3-1fdc-4b7d-8fa3-c5df26e86e32",
    "parentid": "",
    "nodename": "目录3",
    "children": [
      {
        "nodeid": "127eb83b-2c58-4313-96ee-aa35c01b07e6",
        "parentid": "f59286d3-1fdc-4b7d-8fa3-c5df26e86e32",
        "nodename": "目录3-1",
        "children": [
          {
            "nodeid": "4749d51d-db82-4302-8f99-3c51bd1bd093",
            "parentid": "127eb83b-2c58-4313-96ee-aa35c01b07e6",
            "nodename": "目录3-1-1"
          },
          {
            "nodeid": "f73a4b82-cc2a-4b5e-8015-c28478718fca",
            "parentid": "127eb83b-2c58-4313-96ee-aa35c01b07e6",
            "nodename": "目录3-1-2"
          },
          {
            "nodeid": "9d38b195-e5d8-43c5-8c75-71ef52a1e1ec",
            "parentid": "127eb83b-2c58-4313-96ee-aa35c01b07e6",
            "nodename": "目录3-1-3"
          }
        ]
      }
    ]
  },
  {
    "nodeid": "f4872c95-9e15-4d9a-81f8-4c04c7b275a8",
    "parentid": "",
    "nodename": "目录4",
    "children": [
      {
        "nodeid": "4bbbb72c-848a-4046-97fe-40939a335299",
        "parentid": "f4872c95-9e15-4d9a-81f8-4c04c7b275a8",
        "nodename": "目录4-1"
      },
      {
        "nodeid": "ccb75eba-1355-457a-8c67-a53af258e024",
        "parentid": "f4872c95-9e15-4d9a-81f8-4c04c7b275a8",
        "nodename": "目录4-2"
      },
      {
        "nodeid": "bec8cc74-84e7-4909-8cdc-9650aabf75ad",
        "parentid": "f4872c95-9e15-4d9a-81f8-4c04c7b275a8",
        "nodename": "目录4-3"
      },
      {
        "nodeid": "b7c6e31b-ce62-40a7-83d0-0363d48ad0a5",
        "parentid": "f4872c95-9e15-4d9a-81f8-4c04c7b275a8",
        "nodename": "目录4-4"
      }
    ]
  },
  {
    "nodeid": "5e54c8f3-502a-4bed-8542-1e7208d18dad",
    "parentid": "",
    "nodename": "目录5",
    "children": [
      {
        "nodeid": "4264fae0-e7e9-4d85-826e-f195e178704a",
        "parentid": "5e54c8f3-502a-4bed-8542-1e7208d18dad",
        "nodename": "目录5-1"
      },
      {
        "nodeid": "01d8e744-8b29-42e1-8f59-829dcf773644",
        "parentid": "5e54c8f3-502a-4bed-8542-1e7208d18dad",
        "nodename": "目录5-2"
      }
    ]
  }
]

实现思路

由于数据为数组的嵌套，需要在不知道层级的情况下去循环数据内部的children。因此可以考虑使用递归来实现。
递归：简单的理解，可以理解为自己调用自己（无限套娃）
在没有children层级时，使用单层的布局。在有children时，继续调用自身组件。

实现方法

定义Menu组件，处理布局

<template>
  <div>
    <div v-for="item in treeList">
      <p style="margin-bottom: 5px">{{item.nodename}}</p>
      //此处为Menu组件内调用Menu组件
      <Menu style="margin-left: 20px" v-if="item.children" :treeList="item.children"></Menu>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, reactive} from "vue";
import request from "../api/request";

export default {
  name: "Menu",
  props:{
    treeList:{
      type:Array,
      default:[]
    }
  },
}
</script>

在页面中使用

<template>
  <div style="padding: 16px">
  <!--调用Menu组件-->
    <Menu :treeList="treeList"></Menu>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import request from "../api/request";
import Menu from "./menu";

export default {
  name: "tree",
  components: {Menu},
  setup(){

    let treeList = ref([]);

    onMounted(()=> {
      //使用mock获取json数据，模拟接口请求
      request.post('/tree').then(res => {
        treeList.value = res;
      });
    })

    return {
      treeList,
    }
  },
}
</script>