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 = 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