vue项目 el-tree的界面自定义 实现增删改查操作

一、介绍：el-tree在element文档中有查询全树的代码，本文主要是在此基础上添加了增加、删除、修改的界面样式与功能。

二、具体来说：

1、鼠标移动到树上显示删除和修改：

      点击删除，当前节点删除；

      点击修改，树的选中节点变成input可以重新输入名称并且右边出现取消或确认的icon。

2、点击底部添加按钮，如果未选中树节点，则在最外层新增input进行名称输入，右边同样有取消或确认的icon。若选中树节点，则在选中节点下添加子节点，同样以input形式输入名称。

三、实现效果（这个操作速度慢得我怀疑自己开了0.5倍速）：

文章会先用截图对部分代码进行解释（element文档中有的代码，比如查询就不做解释了），随后文章底部会给出相应的demo代码。

四、实现代码+解释+坑：

1、dom代码：

2、data里的代码：

3、节点的数据格式

4、methods里的代码：

项目要求，最多两层组：

到这里这个整个代码就介绍完了，这里还有个坑。

问题：当点击新增节点，再点击取消的icon，这时候观察fetchData方法中两处this.curNode的打印，会发现打印结果是不一样的。这个问题其实并不影响树功能的实现，因为在fetchData中获取数据以后，进行了this.curNode=undefined。只是出于好奇，为什么会出现这个现象？

分析：观察cancelUpdate执行后是不是走了其他方法？没有，也没有触发watch。会不会是引用数据类型的地址引用问题？发现没有。最后发现，是因为点击取消的时候冒泡了！！触发了handleNodeClick方法。

解决：

 

五、demo代码（以下代码根据小伙伴需要已经改成不限深度的模板组插入，并把原来深度为2的模板组插入改成了注释）：