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

本文摘自CSDN,作者:qq_36437172,原文地址:https://blog.csdn.net/qq_36437172/article/details/86307048,侵删。

先上效果图:

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

(一)自定义图标

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

element-ui 树型控件自定义图标

这里主要讲解一下 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 事件,点击节点(包括图标和文字)进行的操作。


欢迎分享,(木庄网络博客交流QQ群:562366239

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论