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