VUE树形菜单组件如何实现展开/收起、全选/取消功能

梦6502025-12-03 15:45

组件结构

基于Vue 3和Element Plus的树形菜单组件，包含展开/收起、全选/取消功能。模板部分使用el-tree展示层级数据，底部按钮控制展开状态和选择状态。

核心功能实现

数据转换 通过buildTree函数将扁平数组转换为树形结构：

typescript 复制代码

const buildTree = (list: MenuNode[], pid = 0) => 
    list.filter(i => i.pid === pid).map(i => ({ ...i, children: buildTree(list, i.id) }));

展开控制 利用expandedKeys和节点遍历实现展开状态切换：

typescript 复制代码

const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
    menuTreeRef.value?.store._getAllNodes().forEach(n => n.expanded = isExpanded.value);
};

全选逻辑 递归收集所有节点ID实现全选功能：

typescript 复制代码

const getAllMenuIds = () => {
    const ids: number[] = [];
    const collect = (n: MenuNode) => { ids.push(n.id); n.children?.forEach(collect); };
    menuData.value.forEach(collect);
    return ids;
};

动态数据加载 支持API异步加载数据时可添加lazy属性和load方法：

typescript 复制代码

<el-tree :load="loadNode" lazy />

自定义节点内容 通过插槽实现节点定制化渲染：

html 复制代码

<el-tree>
    <template #default="{ data }">
        <span class="custom-node">{{ data.title }}</span>
    </template>
</el-tree>

性能优化 大数据量时建议启用虚拟滚动：

typescript 复制代码

<el-tree :height="400" virtual-scrolling />

典型应用场景

权限管理系统：勾选菜单项作为角色权限配置
目录导航：展示多级分类结构
数据筛选：树形条件选择器

注意事项

节点ID需保持唯一性
深层嵌套数据建议限制层级深度
选中状态持久化需配合localStorage或后端存储

效果如下：

收起

展开

全选

代码如下：