iview Tree 右键菜单

最近在使用iview admin3.0做前段UI框架,但是做菜单树的时候发现了一个问题,iview的tree没有右键菜单事件 需要我们自己想办法去实现,今天就来试试吧

整体效果如下

iview Tree 右键菜单_第1张图片

iview Tree 右键菜单_第2张图片

 

完整代码如下:

 

主要代码讲解

首先 在定义树的时候添加监听事件  我在二级和三级目录上添加了监听事件 

iview Tree 右键菜单_第3张图片右键点击菜单 后 首先关闭默认的右键事件 一般默认右键事件是这样的:

iview Tree 右键菜单_第4张图片

然后打开我们自己定义的右键菜单 :

         
                
                    添加菜单
                    修改菜单
                    删除菜单
                

            

具体的添加事件在这里:

iview Tree 右键菜单_第5张图片

 

目前只是完成了简单的右键菜单以及菜单的添加       后续还要进一步的完成修改删除等  存在的问题是  目前只能添加到子节点中去   怎样去添加到当前节点中  并且能自动排序 是需要思考的一个问题

你可能感兴趣的:(UI,iview,iview-admin,vue,右键事件,iview,tree)