Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能

(1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据

        重点:handleNodeClick方法、getTreeNode方法

(2) 选择el-breadcrumb-item设置el-tree节点选中 

         必须设置属性: current-node-key="currentNodeKey"  、 node-key="id"

         重点: 设置树节点渲染 this.$refs.tree.setCurrentKey(item.id) 

(3) 右键点击树节点展示菜单 

        重点:handleNodeContextmenu方法、showTreeMenu方法、设置active样式  

 (4) 树节点编辑节点字段名称

         重点:handleTreeNodeNameEdit方法、submitTreeNodeNameEdit方法






代码仅供参考 具体实现根据具体实际情况! 

你可能感兴趣的:(Vue.js,vue.js,elementui,javascript)