<el-tree:data="data":props="defaultProps"@node-click="handleNodeClick"@node-contextmenu="rightClick"default-expand-all></el-tree><!-- 右鍵菜單 --><div id="menuyuan" class="menuDiv"><ul class="menuUl"><liv-for="(item, index) in menus":key="index"@click.stop="infoClick(index)"><i :class="item.icon"></i> {{ item.name }}</li></ul></div>

1、以上是html? 包括右鍵菜單

2、data中

//雙擊nodeCount: 0,preNodeId: null,curNodeId: null,nodeTimer: null,//右鍵currentData: "",currentNode: "",menuVisible: false,firstLevel: false,Node: {},menus: [{ name: "菜單一", operType: 1, icon: "el-icon-tickets" },{ name: "二", operType: 2, icon: "el-icon-folder-opened" },{ name: "三", operType: 3, icon: "el-icon-folder-add" },{ name: "四", operType: 4, icon: "el-icon-refresh-right" },{ name: "五", operType: 5, icon: "el-icon-close" },],

3、methods中

//雙擊handleNodeClick(data, node, prop) {//這里可以調用單擊事件//這是單擊隱藏右鍵菜單let menu = document.querySelector("#menuyuan");menu.style.display = "none";// console.log(data, node, prop);this.nodeCount++;if (this.preNodeId && this.nodeCount >= 2) {this.curNodeId = data.$treeNodeId;this.nodeCount = 0;if (this.curNodeId == this.preNodeId) {this.compile(node);this.curNodeId = null;this.preNodeId = null;return;}}this.preNodeId = data.$treeNodeId;this.nodeTimer = setTimeout(() => {this.preNodeId = null;this.nodeCount = 0;}, 300);},// 右擊的功能 rightClick(event, object, Node, element) {this.Node = Nodethis.currentData = object;this.currentNode = Node;if (Node.level === 1) {this.firstLevel = true;} else {this.firstLevel = false;}this.menuVisible = true;let menu = document.querySelector('#menuyuan')// /* 菜單定位基于鼠標點擊位置 */menu.style.left = event.clientX + 20 + "px";menu.style.top = event.clientY - 25 + "px";menu.style.display = "block";},// 右擊自定義菜單的點擊事件infoClick(index) {if (index === 0) {// 屬性console.log("屬性");}else if(index === 1){}else if(index === 2){}else if(index === 3){}else if(index === 4){}let menu = document.querySelector("#menuyuan");menu.style.display = "none";},

4、給右鍵菜單加個樣式

.menuDiv {display: none;position: absolute;.menuUl {height: auto;width: auto;font-size: 14px;text-align: left;border-radius: 4px;border: none;background-color: #ffffff;color: #606266;list-style: none;border: 1px solid #ebeef5;li {width: 140px;height: 35px;line-height: 35px;padding: 0 10px;cursor: pointer;border-bottom: 1px solid rgba(255, 255, 255, 0.47);&:hover {display: block;background-color: #ecf5ff;color: #7abbff;}}}}

個人使用的一些總結，使用中發現問題隨時反饋

總結

以上是生活随笔為你收集整理的element ui tree结构双击单机右键事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。