news 2026/5/6 1:36:54

vue 树组件 vxe-tree 如何异步判断右键菜单的权限控制,异步显示隐藏菜单选项

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vue 树组件 vxe-tree 如何异步判断右键菜单的权限控制,异步显示隐藏菜单选项

vue 树组件 vxe-tree 如何异步判断右键菜单的权限控制,异步显示隐藏菜单选项,通过 menu-config.options 来配置右键菜单

https://vxeui.com

通过 menu-config.options.loading 来配置是否加载中

控制 menu-config.options.visible 来实现是否显示菜单

<template><div><vxe-treev-bind="treeOptions"v-on="treeEvents"></vxe-tree></div></template><scriptsetup>import{reactive}from'vue'import{VxeUI}from'vxe-pc-ui'consttreeOptions=reactive({transform:true,nodeConfig:{isHover:true,isCurrent:true},menuConfig:{options:[[{code:'1',name:'新增',loading:false,visible:true},{code:'2',name:'删除',prefixIcon:'vxe-icon-delete-fill',loading:false,visible:true},{code:'3',name:'审批',loading:false,visible:true,children:[{code:'4',name:'通过',prefixIcon:'vxe-icon-check',loading:false,visible:true},{code:'5',name:'不通过',prefixIcon:'vxe-icon-close',loading:false,visible:true}]},{code:'6',name:'查看',prefixIcon:'vxe-icon-link',loading:false,visible:true}],[{code:'11',name:'更多操作',loading:false,visible:true,children:[{code:'13',name:'编辑',prefixIcon:'vxe-icon-feedback',loading:false,visible:true},{code:'14',name:'取消'}]},{code:'10',name:'驳回',prefixIcon:'vxe-icon-undo',loading:false,visible:true}]],visibleMethod({options}){options.forEach(list=>{list.forEach(item=>{if(item.code==='1'||item.code==='3'){item.loading=true}if(item.code==='4'||item.code==='11'){item.loading=true}})})// 模拟后端异步setTimeout(()=>{options.forEach(list=>{list.forEach(item=>{if(item.code==='1'||item.code==='3'){item.visible=falseitem.loading=false}if(item.code==='4'||item.code==='11'){item.visible=falseitem.loading=false}})})},300)returntrue}},data:[{title:'节点2',id:'2',parentId:null},{title:'节点3',id:'3',parentId:null},{title:'节点3-1',id:'31',parentId:'3'},{title:'节点3-2',id:'32',parentId:'3'},{title:'节点3-2-1',id:'321',parentId:'32'},{title:'节点3-2-2',id:'322',parentId:'32'},{title:'节点3-3',id:'33',parentId:'3'},{title:'节点3-3-1',id:'331',parentId:'33'},{title:'节点3-3-2',id:'332',parentId:'33'},{title:'节点3-3-3',id:'333',parentId:'33'},{title:'节点3-4',id:'34',parentId:'3'},{title:'节点4',id:'4',parentId:null},{title:'节点4-1',id:'41',parentId:'4'},{title:'节点4-1-1',id:'411',parentId:'42'},{title:'节点4-1-2',id:'412',parentId:'42'},{title:'节点4-2',id:'42',parentId:'4'},{title:'节点4-3',id:'43',parentId:'4'},{title:'节点4-3-1',id:'431',parentId:'43'},{title:'节点4-3-2',id:'432',parentId:'43'},{title:'节点5',id:'5',parentId:null}]})consttreeEvents={menuClick({node,option}){VxeUI.modal.message({content:`点击了${node.title}- code=${option.code}`,status:'success'})}}</script>

https://gitee.com/x-extends/vxe-pc-ui

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/3 22:19:45

【私域商城系统】

私域商城系统是企业构建自主可控电商生态的核心工具&#xff0c;旨在通过自有渠道深度运营用户资产&#xff0c;实现低成本获客、高复购转化及品牌价值沉淀。以下是其关键特性及实施要点&#xff1a; 一、核心功能模块 全渠道触达与整合 支持小程序、APP、H5、PC端等多终端入口…

作者头像 李华
网站建设 2026/5/3 16:41:29

当AI学会“举一反三”:基于迁移学习的高速列车轴承智能故障诊断系统全解

实验室里的完美数据模型,如何在现实复杂运行环境中保持高精度?迁移学习正为工业智能诊断带来一场静默革命。 在飞驰的京沪高铁上,列车正以350公里时速疾驰。车轴轴承如同列车的心脏,必须时刻保持健康。传统维护依靠定期检修和阈值报警,但一个令人不安的事实是:超过60%的轴…

作者头像 李华
网站建设 2026/4/30 11:59:58

【文献-1/6】通过知识集成增强植物疾病识别中的异常检测

这是一篇关于植物病害识别中异常检测&#xff08;Anomaly Detection&#xff09;的高水平学术论文。以下是对该文献的深度深度分析&#xff1a; 1. 文章概览 标题&#xff1a;Enhancing anomaly detection in plant disease recognition with knowledge ensemble&#xff08;…

作者头像 李华
网站建设 2026/5/2 21:14:34

Web Worker 性能优化实战:将计算密集型逻辑从主线程剥离的正确姿势

在前端开发中&#xff0c;用户体验的流畅度往往取决于“主线程”的响应速度。然而&#xff0c;随着 Web 应用功能的日益复杂&#xff0c;浏览器在处理图像处理、大型二维码生成或复杂数据转换时&#xff0c;常常会出现页面瞬时卡顿甚至假死。 欢迎访问我的个人网站 https://hix…

作者头像 李华
网站建设 2026/5/3 12:28:33

LeetCode 467 环绕字符串中唯一的子字符串

文章目录摘要描述题解答案题解代码分析核心逻辑拆解什么叫“连续环绕”&#xff1f;currentLen 在干嘛&#xff1f;为什么 dp[index] max(dp[index], currentLen)&#xff1f;示例测试及结果示例 1示例 2示例 3时间复杂度空间复杂度总结摘要 这道题第一眼看很容易被“子字符串…

作者头像 李华