【el-tree】树形组件图标的自定义

饿了么树形组件的图标自定义

默认样式:

 可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它隐藏::

.groupList {::v-deep .el-tree-node {         .el-icon-caret-right {display: none;}             }
}

我的全部代码

 <div class="groupList"><el-tree :data="groupList" node-key="id" :default-expanded-keys='defaultexpande':highlight-current="true" :props="defaultProps" @node-drop="handleDrop" draggable:allow-drop="allowDrop" :allow-drag="allowDrag" @node-click='toogleForm' ref='tree'><span slot-scope="{ data }" class="span__" style="padding-left:6px;"><span :class="data.icon" style="margin-right:10px;"></span><el-tooltip effect="dark" placement="top" :visible-arrow='false' :open-delay='500':enterable="false"><div slot="content" v-html="data.fullName"></div><span class="tree-node-span"style="color:black;">{{ data.fullName |Formatstr(7)}}</span></el-tooltip><span class="rightButton2"><span class="iconfont icon-more-grid-big"></span></span></span></el-tree></div>

其中自定义左侧图标的方法:

 我的每条数据都自带icon属性,你没有的话也可以在数据拿到之后手动遍历添加一条icon属性进去,然后再el-tree中使用:

   <span :class="data.icon" style="margin-right:10px;"></span>

如果需要点击改变图标的话就点击改变data中的icon属性即可。 但是先确认是否已经定义好icon对应的图标.

鼠标悬停显示图标:

<span class="rightButton2">        <span class="iconfont icon-more-grid-big"></span></span></span>

css

将右侧图标默认隐藏,悬停显示即可

.groupList{::v-deep .el-tree-node {.el-tree-node__content {   .rightButton2{visibility: hidden;}&:hover .rightButton2 {visibility: visible;}}}
}  

【el-tree】树形结构拖拽,修改分组https://blog.csdn.net/weixin_64530670/article/details/132372128