vue3树形组件+封装+应用

ops/2025/1/12 10:28:08/

文章目录

- 概要
- - 应用场景
  - 代码注释
  - 综合评价
  - 注意事项
- 功能拓展
- - 代码说明

概要

创建一个基于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和iconClickconst emit = defineEmits(["menuClick", "iconClick"])// 定义响应式数据state，目前只有一个contentFlag属性const state = reactive({contentFlag: true})// 递归处理树形数据的方法，设置节点的isExtend、isShow和level属性const recursionArr = (arr) => {