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

Posted 2023-02-28

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

（二）实现单选节点功能

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

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

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

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

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

自定义elementui中的图标

参考技术A elementui图标库图标较少
当你想用elementui的控件而不想用它的图标时，就可以使用自定义的方式来实现

el-icon-my-export为我自定义的图标命名

content里面使用汉字大小会比较正常，但是汉字有时候会出现乱码，可以使用Unicode编码

其他控件的图标替换大多如此，当然具体问题具体分析，我也不确定会不会有不同的情况