之前只实现了对el-tree树形控件初步显示右键菜单，今天对其进一步完善，主要实现如下功能：
1.对菜单进行美化，统一成element-ui风格。
2.右键菜单出现后，点击菜单外其余地方可实现对菜单项的隐藏。
3.右键菜单里放置添加节点和删除节点功能，并加以实现。
二 具体实现
1.查看element-ui的主调色，及其他类似菜单的实现方式，将风格统一。
2.点击空白处使菜单隐藏
这就需要监听鼠标的点击事件，当所点区域是菜单之外即可实现隐藏。
最初实现方法是： document.addEventListener(‘click’,this.menuHide,false);
此方法的三个参数含义为：
1：必须，字符串，指定事件名；
2：必须，指定要事件触发时执行的函数；
3：可选，布尔值，指定事件执行的阶段，在冒泡或者捕获阶段执行。（true为捕获，false为冒泡）
menuHide(e){
console.log("我被执行了！！！")
console.log("!!!!!!!!!!!!!!e.targetName=",e.target.nodeName)
if(!this.$refs.menu.contains(e.target)){
console.log(e.target)
console.log("right!!!!!!!!!")
this.menuVisible = false
通过监听机制給当前文档document添加了一个click监听事件，但el-tree，但后来发现在el-tree节点上，点击右键菜单出现，此时再点击树上其他节点，发现菜单并未正确隐藏。于是查看打印信息。点击右击事件时，根本就不能在外层监听到click左键事件，menucHide并未被调用，当然也就不能实现对右键菜单的隐藏！
原因：事件冒泡机制！
el-tree中封装了右键和click（即左键）事件，因此考虑到冒泡机制，为了避免外层的click事件影响到本身的click事件，它做了一些特殊的处理，强制覆盖了外层的click事件。因此我们在通过watch监听click事件，在el-tree之外的地方是有效的，但是在el-tree上不能够检测到click而成功隐藏菜单。
解决方法：
直接利用el-tree本身方法nodeclick()，利用v-show实现对右键菜单的隐藏。
3.右键菜单选项“增加”及“删除”功能的实现
增加功能利用其方法append()和remove()为tree的节点追加和删除一个子节点。不过将两个功能在右键菜单项中实现。
第一次实现如下：
:data="data5" node-key="id" default-expand-all :expand-on-click-node="false"
@node-contextmenu = "rihgtClick"
class="custom-tree-node" slot-scope="{ node, data }"&
v-if ="node.data.flag" :class="node.icon[0]"& &
v-else-if="node.data.flag === false" :class = "node.icon[1]"&&
{{ node.label }}
//定义菜单及菜单项的操作
v-show = "menuVisible" ref="menu"&
id = "menu"&
tabindex="-1" class="menu__item" id="menu-" @click = "() =& append(data)"&
class="el-icon-circle-plus-outline"&&
tabindex="-1" class="menu__item" id="menu-"&
class="el-icon-edit"&&
tabindex="-1" class="menu__item" id="menu-"
@click = "() =& remove(data)"&
class="el-icon-remove-outline"&&
右键点击时发现可视范围内有多个菜单项，主要的一个菜单，右边还有六个菜单。分析后，发现el-tree中一共有七个节点，这里出现了七个菜单。再查看代码，菜单块放在slot-scope中，树节点的生成也是通过slot-scope循环产生的，这也正是出现多个菜单的原因。
由此又引发了另一个问题：
如上图所示：在一级菜单处右键添加可正确添加至two一级1下的字节点，但在第二个一级节点two一级2处右键添加发现仍旧添加至之前地方。仔细一看才发现是因为，每个节点对应生成了一个右键菜单，于是点击刚刚多个菜单中，two一级2对应的菜单中添加事件，发现果然正确添加。
解决方法：显然菜单是不能放至el-tree内层中的，于是放至外层。但是很快发现，由于我们要获取每个节点信息，放置外层后，获取每个节点的信息就是一个关键点。
于是打印输出相关信息：
如上图所示：可以看到右键时传递的参数中有与append()方法需要的参数相同，于是我们可以利用右键点击事件将该参数存储至一个变量，之后再传递給append方法，恩，就是这样。当涉及到的需要共享多个数据时，可以考虑使用vuex来管理该参数的传递和获取。
同理，remove()方法删除节点也类似迎刃而解了。
三 遗留问题
发现右键菜单的定位仍旧有问题，当滑动鼠标改变当前页面位置时，再次于树节点上右键位置偏离的厉害，并不正确。
vue右键菜单学习
使用vue-contextmenu组件创建右键菜单。
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。下面是vue、element-ui项目，如何使用阿里iconfont图标库的方法。
Element-Ui组件（二十五）Tree 树形控件
Element-Ui组件（二十五）Tree 树形控件
本文来源于Element官方文档：
http://element-cn.eleme.io/#/zh-CN/component/tree
element-ui树形控件后台返回的数据 + 生成组织树的工具类
开发项目的时候遇到需要在表单中选择参会人员，根据不同部门下选择不同的人，在element-ui中有树形控件能满足这种情况，后台封装数据记录一下。
封装格式：
返回数据格式：...
TreeList 右击节点时才显示右键菜单，并使该节点获得焦点
//鼠标右击节点时该节点获得焦点，同时指定TreeList的ContextMenuS
2private void treelArea_MouseDown(object sender,
...
ElementUI Tree 树形控件
因为项目需要用Vue做一个管理系统，其中有一个公司部门的管理页面有用到ElementUI 的树形控件，针对这个功能碰到的一些问题做一下总结一，从后台获取到数据遍历到页面......
验证实现element-ui树形控件的自定义图标及右键菜单（一）
许久不用，element-ui已经更新至2.4.1版本。直接进入今天的正题，前提是node.js的环境还有vue及elment-ui都已经安装了。
element-ui的官方文档中介绍比较粗略，试了...
ElementUI使用第三方图标库Iconfont
1、http://www.iconfont.cn/collections/index?spm=a313x.
进入阿里巴巴图标库2、将所需图标加入购物车，打开购...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端。感觉方式引入png图标比较鸡肋，所以决定把图标整合到element ui。截止目前为止国内外网络上的的相关教程没超过5篇，而且都不...
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我现在有两个对话框，一个为上传文件，一个是移动到，两个对话框都有tree，并且共用同一个treeData数据和新建文件夹方法，对话框里面分别有新建文件夹的方法，会在所点击的路径内添加children。
现在遇到的问题是，两个对话框共用同一数据，共用相同新建文件夹方法的情况下，新建文件夹永远都只会添加到第一个对话框，第二个对话框新建也会提示成功，但是添加的数据还是会跑到第一个对话框中。
如果不共用同一数据，只共用新建的方法时就不会出现第二个对话框新建文件夹时数据跑到第一个对话框的情况。
一直没弄明白到底是怎么回事？还请大神帮忙看看是什么原因。谢谢了
补充内容：各位大佬们看这张图应该就更好理解我说的意思了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
大佬们，看得明白我的描述吗？请问为什么会这样子呢？很急，一直没解决，帮帮忙，会的帮忙解答一下了，谢谢！！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&template&
&h1&Tree One&/h1&
key="tree-one"
ref="treeOne"
:data="data"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"&
&/el-tree&
&h1&Tree Two&/h1&
key="tree-two"
ref="treeTwo"
:data="data"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"&
&/el-tree&
&/template&
let id = 1000
export default {
label: 'Level one 1',
children: [
label: 'Level two 1-1',
children: [
label: 'Level three 1-1-1'
label: 'Level three 1-1-2',
children: [
label: 'Level four 1-1-2-1'
label: 'Level four 1-1-2-2'
label: 'Level one 2'
defaultProps: {
children: 'children',
label: 'label'
methods: {
// 自己手动同步数据，eval!!!!!
append (data) {
const newChild = { id: id++, label: 'testtest', children: [] }
if (!data.children) {
this.$set(data, 'children', [])
data.children.push(newChild)
// eval hack, nextTick is required
this.$nextTick(() =& {
this.$refs.treeTwo.store.setData(this.data)
// 替换整个data
append (node, data, store) {
const treeOne = this.$refs.treeOne
const treeTwo = this.$refs.treeTwo
console.log('tree', treeOne, treeTwo, treeOne === treeTwo) // trees are different
const storeOne = treeOne.store
const storeTwo = treeTwo.store
console.log('store', storeOne, storeTwo, storeOne === storeTwo) // stores are different
const nodeOne = storeOne.getNode(data.id)
const nodeTwo = storeTwo.getNode(data.id)
console.log('node', nodeOne, nodeTwo,
nodeOne === nodeTwo,
nodeOne === node,
nodeTwo === node
) // nodes are different
const dataOne = nodeOne.data
const dataTwo = nodeTwo.data
console.log('data', dataOne, dataTwo,
dataOne === dataTwo,
dataOne === data,
dataTwo === data
) // all true!!!
// just replace all the data of two tree
const newChild = { id: id++, label: 'testtest', children: [] }
const traverse = node =& {
id: node.id,
label: node.label,
children: (node.children ? node.children.map(traverse) : []).concat(node.id === data.id ? [newChild] : [])
const traversed = this.data.map(traverse)
this.data = traversed
remove (node, data) {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d =& d.id === data.id)
children.splice(index, 1)
renderContent (h, { node, data, store }) {
&span style="flex: 1; display: align-items: justify-content: space- font-size: 14 padding-right: 8"&
&span&{node.label}&/span&
&el-button
style="font-size: 12"
type="text"
on-click={() =& this.append(data)}
&/el-button&
&el-button
style="font-size: 12"
type="text"
on-click={() =& this.remove(node, data)}
&/el-button&
&style lang="scss" scoped&
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
调用代码如下
mounted(){
this.$refs.tree[0].setCheckedKeys([]);
模板代码如下
&el-form :model="formValues"&
&el-form-item :label="formData[0].title"&
&el-tree :data="formData[0].data" show-checkbox ref="tree"&&/el-tree&
&/el-form-item&
&el-form-item&
&el-button type="primary" @click="onSubmit"&提交&/el-button&
&el-button type="primary" @click="showData"&显示提交数据&/el-button&
&/el-form-item&
&/el-form&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
el-tree标签中没有`node-key`属性，如果要要使用`this.$refs.tree.setCheckedKeys([])`来设置选中节点，那么el-tree标签的`node-key`属性是必须的。改成以下即可
:data="formData[0].data"
show-checkbox
:node-key = "formData[0].id"
ref="tree"&&/el-tree&
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。vue.js与element-ui实现菜单树形结构 - Yukiee - 博客园
由于业务需要，要求实现树形菜单，且菜单数据由后台返回，在网上找了几篇文章，看下来总算有了解决办法。借鉴文章链接在最底部。
场景：根据业务要求，需要实现活动的树形菜单，菜单数据由后台返回，最后的效果图如下：
后台返回的数据格式是这个样子的：
pID:'1',//父ID
name:'目录一',
menuID:'m1',//本身ID 　　　　　　　　　　　　　　isContent:false//判断是否是目录
name:'目录二',
menuID:'m2', 　　　　　　　　　　　　　　isContent:false
name:'目录一--菜单一',
menuID:'m11', 　　　　　　　　　　　　　　isContent:true
name:'目录一--目录一',
menuID:'m12', 　　　　　　　　　　　　　　isContent:false
}, 　　　　　　　　　　　{
　　　　　　　　　　　　pID:'m12',
name:'目录一--目录一--菜单一',
menuID:'m121', 　　　　　　　　　　　　
isContent:true
name:'目录二--菜单一',
menuID:'m21', 　　　　　　　　　　　　　　isContent:true
name:'目录二--菜单二',
menuID:'m22', 　　　　　　　　　　　　　　isContent:true
这是一串具有父子关系的数据，首先就是要把这一大串数据转化成树形结构：
let data=[{
pID:'1',//父ID
name:'目录一',
menuID:'m1',//本身ID
　　　　　　　　　　　　　　isContent:false//判断是否是目录
name:'目录二',
menuID:'m2',
　　　　　　　　　　　　　　isContent:false
name:'目录一--菜单一',
menuID:'m11',
　　　　　　　　　　　　　　isContent:true
name:'目录一--目录一',
menuID:'m12',
　　　　　　　　　　　　　　isContent:false
　　　　　　　　　　　{
　　　　　　　　　　　　pID:'m12',
name:'目录一--目录一--菜单一',
menuID:'m121',
　　　　　　　　　　　　
isContent:true
name:'目录二--菜单一',
menuID:'m21',
　　　　　　　　　　　　　　isContent:true
name:'目录二--菜单二',
menuID:'m22',
　　　　　　　　　　　　　　isContent:true
let tree = []
for(let i=0;i&data.i++){
if(data[i].pID == '1'){
let obj = data[i]
obj.list = []
tree.push(obj)
data.splice(i,1)
menuList(tree)
console.log(tree)
function menuList(arr){
if(data.length !=0){
for(let i=0; i&arr.i++){
for(let j=0;j&data.j++){
if(data[j].pID == arr[i].menuID){
let obj = data[j]
obj.list = []
arr[i].list.push(obj)
data.splice(j,1)
menuList(arr[i].list)
运行完后返回的结构就是这个样子：
[{"pID":"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","menuID":"m22","isContent":true,"list":[]}]}]
接下来就要展示了，项目中用的element-ui的导航菜单组件，为了实现这样的树形结构，将每一级的菜单单独作为一个组件，通过判断isContent的值来递归。我直接把代码贴出来
theme="dark"
:default-active="openMenuID"
:default-openeds="openMenuArr"
class="el-menu"
@select="handleSelect"&
&template v-for="(item,index) in menuList"&
&el-submenu :index=item.menuID v-if="item.IsContent"&
&template slot="title"&
&i class="el-icon-menu"&&/i&
{{item.name}}
&/template&
&tree-menu :data="item.list"&&/tree-menu&
&/el-submenu&
&el-menu-item :index=item.menuID v-else&{{item.name}}&/el-menu-item&
&/template&
&/el-menu&
tree-menu组件的代码：
&template v-for="(menu,index) in data"&
&el-submenu :index=menu.menuID v-if="menu.IsContent"&
&template slot="title"&
&i class="el-icon-plus"&&/i&
{{menu.name}}&/template&
&tree-menu :data="menu.list"&&/tree-menu&
&/el-submenu&
&el-menu-item v-else :index=menu.menuID&
{{menu.name}}
&/el-menu-item&
&/template&
文章链接一：https://blog.csdn.net/liangrongliu1991/article/details/
文章链接二：http://www.jb51.net/article/125074.htm
阅读(...) 评论()vue.js+element-ui树形控件修改iview步奏详解
原创
 16:25:41
723
这次给大家带来vue.js+element-ui树形控件修改iview步奏详解，vue.js+element-ui树形控件修改iview的有哪些，下面就是实战案例，一起来看一下。element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码，把源码里面的tree模块提取出来然后修改element自带checkbox等组件为iview的checkbox，并且兼容方法最后修改element样式，改为iview风格，自己也添加了一些样式新的tree组件可以说是element的逻辑，iview的风格&template&
@click.stop=&handleClick&
v-show=&node.visible&&
&p class=&chu-tree-nodecontent&
:style=&{ 'padding-left': (node.level - 1) * tree.indent + 'px' }&&
&span :class=&arrowClasses& @click.stop=&handleExpandIconClick&&
&Icon v-if=&!node.isLeaf& type=&arrow-right-b&&&/Icon&
v-if=&showCheckbox&
:value=&node.checked&
:indeterminate=&node.indeterminate&
:disabled=&!!node.disabled&
@click.native.stop
@on-change=&handleCheckChange&&&/Checkbox&
v-if=&node.loading&
class=&ivu-load-loop&&
&node-content :node=&node&&&/node-content&
&collapse-transition&
v-show=&expanded&&
&el-tree-node
:render-content=&renderContent&
v-for=&child in node.childNodes&
:key=&getNodeKey(child)&
:node=&child&
@node-expand=&handleChildNodeExpand&&
&/el-tree-node&
&/collapse-transition&
&/template&修改handleCheckChange，因为iview的checkbox组件逻辑不同，函数的返回不一样，需要兼容handleCheckChange(ev) {
this.node.setChecked(ev, !this.tree.checkStrictly);
},提取完成后的项目结构，以及封装成npm插件使用方法必须安装iview样式风格全部替换成了ivew功能全部按照element-ui原先一样npm i chu-tree-iviewimport chuView from 'chu-tree-iview'
Vue.use(chuView)
&chu-tree&&/chu-tree&使用文档跟element-ui一模一样http://element-cn.eleme.io/#/zh-CN/component/tree相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读：以上就是vue.js+element-ui树形控件修改iview步奏详解的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
点击数(111076)
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
点击数(109012)
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
点击数(83671)
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
点击数(82864)
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
点击数(80089)
php中世界最好的语言
全栈工程师
文章总浏览数
相关视频章节}