先上效果图:
(一)自定义图标
在 element-ui 官网 中,提供了两种方法: render 和 slot 来添加自定义节点内容,可以在节点区添加按钮或图标等。
这里主要讲解一下 slot 自定义图标:
<el-tree
:data="data5"
:props="defaultProps"
node-key="id"
ref="treeForm"
show-checkbox
check-strictly
@check-change="handleClick"
@node-click="nodeClick">
<span class="slot-t-node" slot-scope="{ node, data }">
<i :class="{ 'fa fa-folder': !node.expanded, 'fa fa-folder-open':node.expanded}" style="color: #fcd568;" />
<span>{{ node.label }}</span>
</span>
</el-tree>
(二)实现单选节点功能
这里的单选功能,只不过设置节点时,将原来选中的节点再次覆盖,达到了单选的功能。
(1)通过 @node-click 事件(节点被点击时的回调),设置选中的节点:
nodeClick(data,checked,node){
this.checkedId = data.id
this.$refs.treeForm.setCheckedNodes([data]);
}
(2)通过 @check-change 事件(节点选中状态发生变化时的回调),设置选中的节点:
handleClick(data, checked, node){
if(checked == true){
this.checkedId = data.id;
this.$refs.treeForm.setCheckedNodes([data]);
}
},
(3)为何调用两个事件,做相同操作:
@check-change 事件 主要是用户点击自定义图标前的选择框进行的操作,而 @node-click 事件,点击节点(包括图标和文字)进行的操作。