vue 树组件 vxe-tree 如何异步判断右键菜单的权限控制，异步显示隐藏菜单选项,通过 menu-config.options 来配置右键菜单
https://vxeui.com
通过 menu-config.options.loading 来配置是否加载中,menu-config.options.visible 来实现是否显示菜单
<template><div><vxe-tree v-bind="treeOptions" v-on="treeEvents"></vxe-tree></div>
</template><script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const treeOptions = 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)return true}},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 }]
})const treeEvents = {menuClick ({ node, option }) {VxeUI.modal.message({content: `点击了${node.title} - code=${option.code}`,status: 'success'})}
}
</script>
https://gitee.com/x-extends/vxe-pc-ui
