70 lines
1.5 KiB
Markdown
70 lines
1.5 KiB
Markdown
<cn>
|
|
#### 右键菜单
|
|
自定义展示右键菜单。
|
|
</cn>
|
|
|
|
<us>
|
|
#### Context Menu
|
|
Custom display the context menu
|
|
</us>
|
|
|
|
```vue
|
|
<template>
|
|
<a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys">
|
|
<template #title="{ key: treeKey, title }">
|
|
<a-dropdown :trigger="['contextmenu']">
|
|
<span>{{ title }}</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 = [
|
|
{
|
|
title: '0-0',
|
|
key: '0-0',
|
|
children: [
|
|
{
|
|
title: '0-0-0',
|
|
key: '0-0-0',
|
|
children: [
|
|
{ title: '0-0-0-0', key: '0-0-0-0' },
|
|
{ title: '0-0-0-1', key: '0-0-0-1' },
|
|
{ title: '0-0-0-2', key: '0-0-0-2' },
|
|
],
|
|
},
|
|
{
|
|
title: '0-0-1',
|
|
key: '0-0-1',
|
|
children: [
|
|
{ title: '0-0-1-0', key: '0-0-1-0' },
|
|
{ title: '0-0-1-1', key: '0-0-1-1' },
|
|
{ title: '0-0-1-2', key: '0-0-1-2' },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
export default {
|
|
data() {
|
|
return {
|
|
treeData,
|
|
expandedKeys: ['0-0-0', '0-0-1'],
|
|
};
|
|
},
|
|
methods: {
|
|
onContextMenuClick(treeKey, menuKey) {
|
|
console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
```
|