饿了么树形组件的图标自定义
默认样式:
可以看到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
将右侧图标默认隐藏,悬停显示即可文章来源:https://www.toymoban.com/news/detail-672195.html
.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文章来源地址https://www.toymoban.com/news/detail-672195.html
到了这里,关于【el-tree】树形组件图标的自定义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!