element-UI tree树形控件 修改小三角图标
2020-07-14 04:40
2146 查看
el-tree 默认样式
可以看到有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。
更改成自定义样式
因为是vue的 <style scoped>内写CSS 样式,所以需要添加 /deep/ 进行穿透
.el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点 且未展开 .el-tree /deep/ .el-icon-caret-right:before { background: url("./images/folder.png") no-repeat 0 3px; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } //有子节点 且已展开 .el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before { background: url("./images/folderOpen.png") no-repeat 0 3px; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } //没有子节点 .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before { background: url("./images/file.png") no-repeat 0 3px; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; }
图片来自 Iconfont-阿里巴巴矢量图标库
相关文章推荐
- element-UI el-table树形数据 修改小三角图标
- 关于element-ui tree树形控件中:default-checked-keys的问题
- vue.js element-ui tree树形控件改iview的方法
- element-ui tree树形控件单个选择节点
- vue css样式作用域 scoped中如何修改element-ui的控件样式
- 修改 JTree 图标三角符号加减号图标
- 详解如何实现Element树形控件Tree在懒加载模式下的动态更新
- Element-Ui组件(二十五)Tree 树形控件
- 背水一战 Windows 10 (45) - 控件(图标类): IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon
- 树形控件--支持图标和多选框
- 树形控件设定图标以及“双击”与“单击时选中”处理
- vue elementUI tree树形控件获取父节点ID的实例
- VC中给树形控件的图标加上工具提示
- vue2.0+Element-ui应用【Tree树形控件】
- 给树形目录控件的节点添加图标
- 用element-ui实现树形控件搜索定位功能
- vue中element-ui树形控件自定义节点,注意一下
- ElementUI树形控件报错问题解决
- Element-ui中tree树形控件全选与取消全选的功能实现
- 修改工具栏图标&得到CTreeCtrl控件item的状态为始终为未选中(unchecked)