element ui tree结构双击单机右键事件

<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结构双击单机右键事件相关推荐

Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
element ui tree左侧选中，右侧渲染，右侧删除单个标签，左侧对应标签不选中
效果如下图所示: 代码: //左侧引入elementUI tree <el-treeref="tree"node-key="id":expand-on-c ...
element ui tree增删改查_clientgo连接K8s集群进行pod的增删改查
背景最近在看client-go源码最基础的部分,client-go的四类客户端,RestClient.ClientSet.DynamicClient.DiscoveryClient.其中RestCl ...
element ui tree树节点数据平面化
有时候需要对树节点进行增删改查,因此需要快速找到要操作的这个节点.将label,children格式的数据平面化处理后,可以根据id等唯一标识字段快速定位节点,随后对其操作. 数据平面化操作: fun ...
Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...

element ui tree结构双击单机右键事件

element ui tree结构双击单机右键事件相关推荐

最新文章

热门文章