中监听右键点击事件、阻止默认行为、显示自定义右键菜单以及为菜单项添加点击事件处理函数。 1. 在el-tree组件中监听右键点击事件 Element UI的el-tree组件本身并不直接提供右键点击事件(如@contextmenu),但你可以通过监听节点的@node-contextmenu事件来实现。这个事件会在节点上右键点击时触发。
添加右键菜单 组件的官网 https://element.eleme.cn/#/zh-CN/component/tree 事件解析参数 node-contextmenu 当某一节点被鼠标右键点击时会触发该事件 共四个参数,依次为:event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 node-click 节点被点击时的回调 共三个参数,依次为:...
},//右键rightClick(event, data, node, obj) {this.treeNode = node//节点组件本身this.treeData = data//属性的数组中该节点所对应的对象、节点对应的this.$emit('rightClick', event, data, node, obj) },//选中机构handleNodeClick(data, node) {this.$emit('handleNodeClick', data, node) },/...
1 打开一个vue文件，添加一个可以拖拽el-tree树形控件，设置值为多个层级的数组。2 在el-tree树形控件上添加node-contextmenu右键点击事件，当右键el-tree节点时在控制台打印当前节点的内容。如图 3 保存vue文件后使用浏览器打开，按键盘上的F12打开控制台，右键点击树形控件内容为一级1，即可在控制台上看到打印出该...
emitonsearchthissearchvalue获取树的数据handletreedatathisinsidetreedatathisvalue右键rightclickeventdatanodeobjthistreenodenode节点组件本身thistreedatadata属性的数组中该节点所对应的对象节点对应的this el-tree机构树右键新增、修改、删除总结, tree组件封装
el-tree右键菜单组件/*** ContextMenu 使⽤说明***/ <jb-context-menu ref="contextMenu" class="right-menu":target="contextMenuTarget":show="contextMenuVisible"@update:show="(show) => contextMenuVisible = show"> 增加 修改 删除 </jb-context-menu> // 当节点⿏标右键点击时触发该事件 // ...
鼠标右键显示的菜单是根据所右键的节点的内容决定的。 不是所有的节点都有删除功能,也就是不是所有文件都是可以删除的,因为项目的某些后台文件删除会导致整个项目跑不起来。但是crtl+左键多选是所有节点都可以选择的,所以删除时需要排除掉不可删除的节点
(data.children&&data.children.length>0){this.addTypeLi=true;}else{this.addTypeLi=false;}constself=this;document.onclick=function(ev){if(ev.target!==document.getElementById("rightMenu")){self.visible=false;}};},// 解决单击隐藏右键菜单的问题handleNodeClick(data,node){if(this.visible){this...
使用el-tree结构数,从后端请求接口渲染的数据;如何实现鼠标右键点击某条目录跳出菜单点击菜单数据后还是显示高亮只到点击下一个;浏览器的右键菜单我禁止了; <el-tree class="filter-tree" :data="towerData" :props="defaultProps" :default-expand-all="true" :filter-node-method="filterNode" :expand-on-clic...
methods:{// 右键压下rightClick(MouseEvent,object,Node,element){console.log(Node)this.nodeData=Nodethis.menuVisible=true;letmenu=document.querySelector("#menu");menu.style.cssText="position: fixed; left: "+(MouseEvent.clientX-10)+'px'+"; top: "+(MouseEvent.clientY-25)+'px; z-index:...