Vue ElementUI el-tree 修改节点收缩 icon

需求：el-tree 父节点收缩 icon 展开和隐藏样式修改。

一、原始样式

二、修改后

三、代码

Html：注意 el-tree 标签上有一个 div 。

<div class="eltree-main"><el-tree:data="data"show-checkboxnode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]"></el-tree>
</div>

CSS：注意这里使用局部 scoped ，但要使用 >>> ，否则无效。

<style lang="stylus" scoped>
.eltree-main >>> .el-tree {.el-tree-node__expand-icon.expanded {// 已展开的父节点 收缩 iconcontent: url('~@images/caret.png');}.el-icon-caret-right:before{// 未展开的父节点 收缩 iconcontent: url('~@images/caret.png');}.is-leaf:before {// 子节点 收缩 iconcontent: '';}
}
</style>

原始 icon

展开和隐藏的父节点收缩 icon，都使用上面这个图片。组件内部做了转换，仅注意即可。

Vue ElementUI el-tree 修改节点收缩 icon相关推荐

常见的 vue elementUI el的标签总结
vue elementUI el的标签总结标签源码标签作用 el-col 整体 el-container 主体区域 el-tooltip 提示框信息 el-header 内容头部区域 el-asi ...
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...
Element-UI实现Tree 树形控件节点添加图标
Element-UI实现Tree 树形控件节点添加图标: 属于自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-content 和 scoped slot. 1.scoped s ...
vue修改节点class_Vue2.0 源码解读系列来自 Vue 的神秘礼盒
鄢栋,微医云服务团队前端工程师.有志成为一名全栈开发工程师甚至架构师,路漫漫,吾求索.生活中通过健身释放压力,思考问题. 目前 Vue3.0 打的很火热,都已经出了很多 Vue3.0 源码解析系列的博 ...
ext tree相关知识动态修改节点小图标
ext tree相关知识 Java代码 ext tree 动态修改各个节点名称icon小图标 [java] view plaincopy ext tree 动态修改各个节点名称icon小图标 Jav ...
Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整实现
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整 ...
SSH2（后台管理页面+Vue+Element-UI+动态树+分页+正则表达）
后台搭建-前端展示 1:加入maven項目 1.1创建如图中的工作流程包+配置文件 1.2导入Spring容器框架(业务逻辑处理) 2.Base(接口工具类): 3.SYS模块包: **Util工具类 ...

Vue ElementUI el-tree 修改节点收缩 icon

一、原始样式

二、修改后

三、代码

Vue ElementUI el-tree 修改节点收缩 icon相关推荐

最新文章

热门文章