vue3树形组件+封装+应用

概要

创建一个基于Vue 3的树形结构组件，用于展示具有层级关系的数据，并提供了节点展开/折叠、点击等交互功能。以下是对其应用场景、代码注释以及综合评价和注意事项的详细说明。

应用场景

这个组件适用于需要展示层级结构数据的场景，例如：

• 菜单导航：展示多级菜单，用户可以点击展开或折叠子菜单。
• 文件目录结构：呈现文件系统的目录层级，方便用户浏览和操作。
• 组织架构展示：展示公司或团队的组织架构，显示不同层级的人员或部门。
• 图标自定义：根据项目需求可自定义树形结构以及不同层级样式及不同图标，自行修改更换即可。

代码注释

<template>
  <div class="treeBox" id="treeBox">
    <!-- 遍历树形数据，为每个节点生成相应的DOM元素 -->
    <div v-for="(item, index) in props.treeData" @click.stop.prevent="lonelyClick(item)" 
    :title="item.label" :class="['lonely', 'lonely'+item.level]">
      <!-- 如果节点有子节点，显示展开/折叠图标 -->
      <span @click.stop="iconClick(item, $event)" v-if="item.children">
        <el-icon :class="['faicon','level'+item.level, 'downIcon']" v-if="item.isExtend">
        <DArrowRight /></el-icon>
        <el-icon :class="['faicon','level'+item.level, 'rightIcon']" v-else><DArrowRight/>
        </el-icon>
      </span>
      <!-- 如果节点有图片，显示图片图标 -->
      <img :src="item.img" alt="" v-if="item.img" 
      :class="['imgIcon', 'level'+item.level]">
      <!-- 显示节点标签，点击触发lonelyClick方法 -->
      <span class="label" @click.stop="lonelyClick(item)"
       :class="['level'+item.level, item.isActive? 'styActive' : '']">
       {
  { item.label }}</span>
      <!-- 如果节点有子节点且子节点数组不为空，显示子节点容器 -->
      <div v-if="item.children&&item.children.length" class="childBox">
        <!-- 递归渲染子树形结构，只有当节点展开时才显示 -->
        <myTree :treeData="item.children" v-if="item.isShow" @menuClick="menuClick">
        </myTree>
      </div>
    </div>
  </div>
</template>
<script>
export default {
     
  name: "myTree",
};
</script>
<script setup>
  import {
     
    ref,
    reactive,
    toRefs,
    onMounted,
    getCurrentInstance
  } from "vue"
  // 定义组件接收的props，treeData为树形结构数据，默认提供了一个示例数据
  const props = defineProps({
     
    treeData: {
     
      type: Array,
      default: [{
     
      id: "1",
      label: "装备基础数据管理",
      img: null, //new URL(`./img/downArrow.png`, import.meta.url).href,
      path: "",
      isExtend: true,
      isShow: true,
      agentType: null,
      isActive: false,
      children: [
        {
     
          id: "1-1",
          label: "多源数据引接",
          img: null,
          pid: "1",
          path: "",
          isExtend: true,
          isShow: true,
          agentType: null,
          isActive: false,
        },
      ],
    }]
    },
  })
  // 定义组件触发的事件，包括menuClick和iconClick
  const emit = defineEmits(["menuClick", "iconClick"])
  // 定义响应式数据state，目前只有一个contentFlag属性
  const state = reactive({
     
    contentFlag: true
  })

  // 递归处理树形数据的方法，设置节点的isExtend、isShow和level属性
  const recursionArr = (arr) => {