75 lines
2.0 KiB
Vue
75 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<el-tree :data="treeData" @contextmenu="handleContextMenu"></el-tree>
|
|
<el-menu :model="contextMenu" v-show="contextMenuVisible" @click="handleContextMenuItemClick"></el-menu>
|
|
<el-dialog v-model="dialogVisible" title="新增节点">
|
|
<!-- 表单内容，可以根据需求自定义 -->
|
|
<!-- ... -->
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="saveNode">保存</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
treeData: [
|
|
// 初始树的数据
|
|
// ...
|
|
],
|
|
contextMenuVisible: false,
|
|
contextMenu: [
|
|
{ text: '新增', command: 'add' },
|
|
{ text: '取消', command: 'cancel' }
|
|
],
|
|
dialogVisible: false,
|
|
newNodeData: {
|
|
// 新节点的数据，可以根据需求定义
|
|
// ...
|
|
},
|
|
selectedNode: null
|
|
};
|
|
},
|
|
methods: {
|
|
handleContextMenu(event, data) {
|
|
// 右击节点时的事件处理
|
|
event.preventDefault();
|
|
this.contextMenuVisible = true;
|
|
this.selectedNode = data;
|
|
this.$nextTick(() => {
|
|
this.$refs.contextMenu.open(event.pageX, event.pageY);
|
|
});
|
|
},
|
|
handleContextMenuItemClick(command) {
|
|
if (command === 'add') {
|
|
this.dialogVisible = true;
|
|
} else if (command === 'cancel') {
|
|
this.contextMenuVisible = false;
|
|
}
|
|
},
|
|
saveNode() {
|
|
// 执行保存操作，将新节点添加到树的数据中
|
|
// ...
|
|
// 添加新节点
|
|
const newNode = {
|
|
// 新节点的数据，根据实际需求设置
|
|
label: this.newNodeData.label,
|
|
// ...
|
|
};
|
|
if (!this.selectedNode.children) {
|
|
this.selectedNode.children = [];
|
|
}
|
|
this.selectedNode.children.push(newNode);
|
|
|
|
// 关闭弹出框和右击菜单
|
|
this.dialogVisible = false;
|
|
this.contextMenuVisible = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|