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

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

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

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

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>

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