Tree support contextmenu

This commit is contained in:
梁灏 2020-06-23 17:09:23 +08:00
parent 3a398ab371
commit 68b7ebbfdb
4 changed files with 64 additions and 5 deletions

View file

@ -1,5 +1,10 @@
<template>
<Tree :data="data4" show-checkbox multiple></Tree>
<Tree :data="data4" show-checkbox multiple @on-contextmenu="handleContextMenu">
<template slot="contextMenu">
<DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
</template>
</Tree>
</template>
<script>
export default {
@ -10,11 +15,13 @@
title: 'parent 1',
expand: true,
selected: true,
contextmenu: true,
children: [
{
title: 'parent 1-1',
expand: true,
disabled: true,
contextmenu: true,
children: [
{
title: 'leaf 1-1-1',
@ -28,19 +35,33 @@
{
title: 'parent 1-2',
expand: true,
contextmenu: true,
children: [
{
title: 'leaf 1-2-1',
checked: true
},
{
title: 'leaf 1-2-1'
title: 'leaf 1-2-1',
contextmenu: true,
}
]
}
]
}
]
],
contextTitle: 0
}
},
methods: {
handleContextMenu (data) {
this.contextTitle = data.title;
},
handleContextMenuEdit () {
this.$Message.info('Click edit of line' + this.contextTitle);
},
handleContextMenuDelete () {
this.$Message.info('Click delete of line' + this.contextTitle);
}
}
}