用vue实现tree树状侧边栏

实现的出来的效果

类似于这种

测试数据

[
  {
    "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"
      }
    ]
  }
]

实现思路，我们都知道js可以写递归的函数，我们吧js的递归思想放到vue中，让组件调用自己

定义一个meun组件

<template>
    <div class="metree">
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <div class="tree" v-for="v in props.data" :key="v.parentid">
                <div class="namevoss">{{ v.nodename }}</div>
                <metree :data="v.children" />
            </div>
        </el-checkbox-group>
    </div>
</template>

<script setup>
const props = defineProps({
    data: Array,
    default: []
})
console.log(props);
</script>
<script>
export default {
    name: 'metree'
}
</script>

<style lang="scss" scoped>
.metree {}
</style>

然后写出我们自己想要的样式；这是vue3的写法

然后我们在父组件调用

<template>
    <div class="contents">
    <metree :data="UnitList" />
    </div>
</template>

<script setup>
import metree from './metree.vue'
const UnitList=[]  //这里拿到刚刚的测试数据

</script>


<style lang="scss" scoped>
</style>