element-ui 树型控件自定义图标和实现单选节点功能

（一）自定义图标

在element-ui 官网中，提供了两种方法: render 和 slot 来添加自定义节点内容，可以在节点区添加按钮或图标等。

（二）实现单选节点功能

这里的单选功能，只不过设置节点时，将原来选中的节点再次覆盖，达到了单选的功能。

（1）通过 @node-click 事件（节点被点击时的回调），设置选中的节点：

（2）通过 @check-change 事件（节点选中状态发生变化时的回调），设置选中的节点：

（3）为何调用两个事件，做相同 *** 作：

@check-change 事件 主要是用户点击自定义图标前的选择框进行的 *** 作，而 @node-click 事件，点击节点（包括图标和文字）进行的 *** 作。

最近写了一个后台管理树状图，后台给的数据不是很好，属于那种每一层节点建一个表，我也是醉了。我也是根据他的需求，把树状图拼了出来。把如何写的截个图发到上，免得忘了。

1：html

2：data数据

3：methods

好了，到这里树状图懒加载就已经做完了，如果要在树状图节点上添加增删改查功能，看下一个文章。

网上有很多重置el-tree勾选以达到单选的目的，

主要思路是在点击多选框或者是点击树节点时候 setCheckedNodes 设置当前勾选节点

但是亲身实验效果并不理想，多层级或快速点击时都会选择多个或者页面视图是勾选一个，但是获取勾选元素时还是多个节点被勾选

于是，展示自定义节点内容，并加入radio单选按钮真正的实现单选；

---