当前位置: 首页 > news >正文

Vue3+Ts+Element Plus 权限菜单控制节点

实现了完整的父子节点联动逻辑功能:

  1. 选择父节点时自动选中所有子节点
  2. 取消父节点时自动取消所有子节点
  3. 选择子节点时自动选中所有父节点
  4. 取消子节点时保留父节点的勾选状态

如图效果:

代码部分:

<template><div><el-drawerv-model="dialogVisible"title="菜单权限设置 - 静态案例"size="400"@close="handleClose"class="pl-8 pr-8"><div class="mb-4 text-sm text-gray-500">这是一个静态案例,展示父子节点联动选择功能</div><el-treeref="treeRef":data="menuData"highlight-currentshow-checkbox:check-strictly="true"node-key="id":default-checked-keys="defaultCheckedKeys":props="defaultProps":default-expand-all="true"@check="hanleCheck"@check-change="checkChange"/><template #footer><div class="dialog-footer"><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="submitForm">确认</el-button></div></template></el-drawer></div>
</template>
逻辑部分:
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";// 类型定义
interface MenuItem {id: number;title: string;children?: MenuItem[];
}interface FormInfo {menuIds: number[];
}interface RowList {id?: number;menus_ids?: number[];
}// 静态菜单数据
const menuData: MenuItem[] = [{id: 1,title: "系统管理",children: [{ id: 11, title: "用户管理" },{ id: 12, title: "角色管理" },{ id: 13, title: "权限设置" }]},{id: 2,title: "商品管理",children: [{ id: 21, title: "商品列表" },{ id: 22, title: "商品分类" },{ id: 23, title: "库存管理" }]},{id: 3,title: "订单管理",children: [{ id: 31, title: "订单列表" },{ id: 32, title: "退款管理" },{ id: 33, title: "物流跟踪" }]},{id: 4,title: "数据统计",children: [{ id: 41, title: "销售统计" },{ id: 42, title: "用户分析" },{ id: 43, title: "商品分析" }]}
];// 默认选中的菜单ID
const defaultCheckedKeys = [11, 21, 31];// 响应式数据
const dialogVisible = ref<boolean>(true);
const treeRef = ref();
const selectedMenuIds = ref<number[]>(defaultCheckedKeys);const defaultProps = {children: "children",label: "title",
};// 递归设置子节点的选择状态
const setChildrenChecked = (children: any[], isChecked: boolean) => {children.forEach((child: any) => {treeRef.value!.setChecked(child.id, isChecked, false);if (child.children && child.children.length > 0) {setChildrenChecked(child.children, isChecked);}});
};// 递归选中所有父节点
const setParentChecked = (node: any) => {if (!node.parent) return;// 选中父节点treeRef.value!.setChecked(node.parent, true, false);// 继续递归选中父节点的父节点setParentChecked(node.parent);
};// 处理节点选择
const hanleCheck = (data: MenuItem) => {const isChecked = treeRef.value!.getNode(data).checked;const currentNode = treeRef.value!.getNode(data);if (isChecked) {setParentChecked(currentNode);if (data.children?.length) {setChildrenChecked(data.children, true);}} else {if (data.children?.length && !currentNode.checked) {setChildrenChecked(data.children, false);}}updateSelectedMenuIds();
};const checkChange = () => {updateSelectedMenuIds();
};const updateSelectedMenuIds = () => {const checkedNodes = treeRef.value!.getCheckedNodes(false, false);selectedMenuIds.value = checkedNodes.map(node => node.id);
};const handleClose = () => {dialogVisible.value = false;ElMessage.info("已关闭菜单权限设置");
};const submitForm = () => {updateSelectedMenuIds();ElMessage.success(`权限设置成功!选中的菜单ID: [${selectedMenuIds.value.join(', ')}]`);console.log("选中的菜单ID:", selectedMenuIds.value);
};
</script><style scoped>
.dialog-footer {display: flex;justify-content: flex-end;gap: 12px;margin-top: 16px;
}
</style>

http://www.dtcms.com/a/485892.html

相关文章:

  • PP-OCRv5 MCP服务器在海光主板的部署与实战
  • Linux 服务器NFS文件共享
  • 吃透大数据算法-算法地图(备用)
  • 前端性能优化实战:从指标到落地的全流程指南
  • 120html
  • 四川建设人才官方网站制作app需要学哪些东西专业知识
  • 二叉搜索树 --- 概念 + 模拟
  • 系统安全-主流密码加密算法BCrypt 和PBKDF2详解
  • 【具身智能】具身机器人VLA算法入门及实战(一):具身智能系统及VLA
  • 网站设计_网站建设_手机网站建设免费申请域名的网站
  • (1)认识测试
  • 2025年--Lc188--221. 最大正方形(多维动态规划,矩阵)--Java版
  • 【Redis】缓存读/写操作流程
  • 网站开发的网页模板移动网站建设价格便宜
  • Grafana 数据展示全流程指南:从安装到高级可视化实践
  • 电脑没法ping通某个网段的ip
  • ​rxnfp 仓库介绍(https://rxn4chemistry.github.io/rxnfp)​
  • iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
  • 工信部网站找回不了密码网站用什么做
  • MaxScale:MySQL读写分离实战指南
  • 基于Vue的体检中心管理系统的开发bk1825s9(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
  • RabbitMQ的概述
  • 使用PyTorch实现图像分类任务的全流程详解
  • JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
  • 吃谷机主题商城小程序的界面功能设计
  • 创建网站超市网络免费推广平台
  • 【征文计划】码上分享:基于 Rokid CXR-M SDK 构建「AI远程协作助手」实战全记录
  • PortSwigger靶场之CSRF where token is tied to non-session cookie通关秘籍
  • laya报错:GET http://xxx/bin/%22%22 404(Not Found)
  • 兴义市住房和城乡建设局网站莲花网站