vue 树组件 vxe-tree 如何异步判断右键菜单的权限控制，异步显示隐藏菜单选项
<p>vue 树组件 vxe-tree 如何异步判断右键菜单的权限控制，异步显示隐藏菜单选项,通过 menu-config.options 来配置右键菜单</p><p>https://vxeui.com</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202601/3563285-20260106151024872-549618425.gif"></p>
<p>通过 menu-config.options.loading 来配置是否加载中,menu-config.options.visible 来实现是否显示菜单</p>
<pre><code class="language-html"><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 = false
item.loading = false
}
if (item.code === '4' || item.code === '11') {
item.visible = false
item.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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-pc-ui</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19447820
頁:
[1]