近来有一个新需求就是给tree加上右键菜单。网上搜搜就采用了轮子vue-context-menu，不多BB直接上代码
<div :style="{'overflow':'auto','padding':'10px','height':contentHeight-210 +'px'}">
<el-tree @node-contextmenu="rightClick" id="el-tree" :data="workList" :props="workListTreeProps"
@node-click="nodeClick" node-key="id" ref="menuListTreeC" :highlight-current="true"
:expand-on-click-node="false" @node-drop="handleDrop" draggable :allow-drag="allowDrag"
:allow-drop="allowDrop">
<div class="slot-t-node" slot-scope="{ node, data }">
<div class="flex" v-if="node.childNodes.length>0">
<icon-svg v-if="node.data.flag==1" name="rule" class="site-sidebar__menu-icon">
</icon-svg>
<icon-svg v-else-if="node.data.flag==2" name="Workgroup"
class="site-sidebar__menu-icon">
</icon-svg>
<icon-svg v-else-if="node.data.flag==3" name="Operationitem"
class="site-sidebar__menu-icon">
</icon-svg>
<icon-svg v-else name="Contract_management" class="site-sidebar__menu-icon">
</icon-svg>
<span>{{ node.label }}</span>
</div>
<div class="flex" v-else>
<icon-svg v-if="node.data.flag==1" name="rule" class="site-sidebar__menu-icon">
</icon-svg>
<icon-svg v-else-if="node.data.flag==2" name="zuoye"
class="site-sidebar__menu-icon">
</icon-svg>
<icon-svg v-else-if="node.data.flag==3" name="Operationitem"
class="site-sidebar__menu-icon">
</icon-svg>
<icon-svg v-else name="Contract_management" class="site-sidebar__menu-icon">
</icon-svg>
<span>{{ node.label }}</span>
</div>
</div>
</el-tree>
<vue-context-menu :target="contextMenuTarget" :show="contextMenuVisible" class="right-menu"
@update:show="(show) => contextMenuVisible = show">
<el-row style="borderRadius:2px;textAlign:left">
<el-button icon="el-icon-document-copy"
style="border:0;borderRadius:0;width:100%;textAlign:left" @click="copy">
复制</el-button>
</el-row>
<el-row style="borderRadius:2px;textAlign:left">
<el-button icon="el-icon-document-checked"
style="border:0;borderRadius:0;width:100%;textAlign:left" @click="paste">
粘贴</el-button>
</el-row>
</vue-context-menu>
</div>
上面是html部分，当然你需要安装这个轮子并且引入进来。
下面是method部分
rightClick(e, data, node) {
this.treeNodeData = data; // 存当前数据
this.treeNode = node; // 存当前节点信息
console.log('rightClick', this.treeNodeData, this.treeNode);
this.contextMenuVisible = true; // 让菜单显示
console.log('0', e, '1', e.screenX, '2', e.screenY);
const ele = document.querySelector('.right-menu');
ele.style.position = 'fixed';
ele.style.top = `${e.clientY}px`;
ele.style.left = `${e.clientX + 10}px`; //根据鼠标点击位置设置菜单出现
},
copy() {
this.contextMenuVisible = false;
this.copyNode = this.treeNodeData
console.log('copy', this.treeNodeData, this.treeNode);
},
paste() {
this.contextMenuVisible = false;
this.$confirm(
`是否确认将${this.copyNode.taskStandardName}复制到${this.treeNodeData.taskStandardName}`,
"提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(() => {
//确定粘贴后调接口处理数据 预计发送两个id参数
});
console.log('paste', this.treeNodeData, this.treeNode);
},
这里只放了复制粘贴功能，也可以根据实际需求自己添加更多想要的功能菜单
