andt中tree组件右击菜单

<template>
  <a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys" :replaceFields="{ children:'children', title:'roleTitle', key:'id' }">
<!-- 官方组件直接按照replaceFields属性替换#titlel里面对应属性即可   <template #title="{ key: treeKey, title }">-->
    <template #title="{ id: treeKey, roleTitle }">
      <a-dropdown :trigger="['contextmenu']">
        <span>{{ roleTitle }}</span>
        <template #overlay>
          <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
            <a-menu-item key="1">1st menu item</a-menu-item>
            <a-menu-item key="2">2nd menu item</a-menu-item>
            <a-menu-item key="3">3rd menu item</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </a-tree>
</template>
<script>
const treeData = [
  {
    roleTitle: '0-0',
    id: 1,
    children: []
  }
]
export default {
  data () {
    return {
      treeData,
      expandedKeys: ['0-0-0', '0-0-1']
    }
  },
  methods: {
    onContextMenuClick (treeKey, menuKey) {
      // console.log(treeKey, menuKey)
      console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`)
    }
  }
}
</script>