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

（一）自定义图标

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

（二）实现单选节点功能

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

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

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

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

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

首先，添加部件“Microsoft

Windows

Common

Controls

6.0”.添加控件Treeview1，Imagelist1.注意，Treeview添加图标必须通过Imagelist控件的辅助来进行。然后右击Imagelist1，选择属性，在里面的对话框中选择Image选项卡，单击Insert

Image

按钮，找到你需要的图标，全部导入。我以VB的Common文件夹中的Graphics\Icons\Comm中的图标为例。代码如下。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Option

Explicit

Private

Sub

Form_Load()

Dim

i

As

Integer

TreeView1.ImageList

=

ImageList1

For

i

=

1

To

ImageList1.ListImages.Count

TreeView1.Nodes.Add

Text:=i,

Image:=i

Next

End

Sub

首先需要为窗体添加ImageList，然后把所有需要显示的图标加载其中。

然后用此去初始化treeview的ImageList属性

注意：ImageList也是个控件。从工具箱找到ImageList 拖到你的TreeView上 然后就可以设置了

---