vue项目中修改Element库el-tree前面的展开收起图标（在css中使用icon图标）。

最新推荐文章于 2024-07-23 18:12:36 发布
最新推荐文章于 2024-07-23 18:12:36 发布
阅读量3.6k 收藏 15
点赞数 4
文章标签： css vue.js css3 icons
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43520916/article/details/111310716
版权
本文介绍了如何在Vue项目中，通过修改Element UI的el-tree组件的CSS，替换展开前后的图标为自定义的Iconfont图标。通过查找并修改`.el-icon-caret-right:before`类的content属性，设置16进制Unicode，实现展开前图标的更改。当树节点展开时，利用`.is-expanded`类修改展开后的图标，达到定制化效果。
摘要由CSDN通过智能技术生成
  1. 全局修改找到全局样式tree.css（修改单个组件，用样式穿透作用上去v-deep）
  2. 修改展开前的图标：在tree组件的类下找到子类：.el-icon-caret-right:before，修改这个类（我这里用的是iconfont图标）。content里面填图标的16进制。这个16进制可以在icon font官网里找到，点击编辑单个图标，弹窗的左下方有个Unicode(16进制)，复制下方的16进制放进content就好拉！
.el-icon-caret-right:before{
   
    font-family:'iconfont'!important;
    content: '\e63f';
最低0.47元/天 解锁文章
一个不会“码”的yin
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree前添加图标，el-tree只从第二级添加图标，el-tree添加增删改图标
weixin_41346436的博客
07-30 4082
el-tree是特别常见的组件，一般要求给每一级文字前面添加图标，从第二级开始添加删除，修改图标 增删改的图标都是当鼠标悬浮在当前节点之上才显示！ 先展示下效果图 第二级添加删除，修改图标 代码结构 <template> <!-- 节点树结构 --> <div class="treeBox"> <el-tree ref="tree"
element 树形 el-tree 修改小三角箭头图标CSS
qq_44783086的博客
03-09 1065
【代码】element 树形 el-tree 修改小三角箭头图标CSS。
Debug-018-elementUI-el-tree中通过CSS隐藏任意一项的选择框checkbox
最新发布
LM0916的博客
07-23 611
现在有一个需求描述一下：首先是这个el-tree是个有checkbox的树，每一子节点都可以被选择，用于去实现一些系统的权限方面的功能，现在有一个特殊要求是，隐藏掉某几个叶子节点的checkbox选择框，因为这几个是不需要传递id给后端的，如果显示checkbox，由于el-tree是父子级联的关系（业务中不允许做成父子不级联的，因为菜单很多，用户一个个去勾选叶子节点非常麻烦），所以，选了父级节点，子节点会全部被勾选，这个机制是不会变的。以上是从业务上讲的，不理解的话也没事，因为我说的不是很具体。
修改element-ui中Tree树形结构前面的三角形图标
可可爱爱的你吖的博客
08-25 2744
修改element-ui中Tree树形结构前面的三角形图标
记录el-tree 或 vl-tree 替换树的图标，并设置展开和收起的图标
weixin_65607135的博客
05-31 306
expanded 表示树展开的图表样式 没有则表示收起的。
关于el-tree左侧展开指示小图标自定义的方法
行走的过客
04-19 4119
在el-tree中，其左侧有个小小的指示是否折叠的图表，要是想自定义这个图标，又能用它原来的动画效果，怎么办呢？ 这里只需要指定el-tree的icon-class属性为我们自定义的class名称，然后我们在自定义的class中写css样式，类似这种： background:url(".*****.svg/png/..."); width:16px; height:10px; padding:0px; box-sizing:
修改el-tree 展开收起icon 的方法
qq_44393166的博客
04-26 2903
修改el-tree 展开收起icon方法 先上效果图 <el-tree ref="tree" class="pageTree" :data="treeData" highlight-current :default-expanded-keys="defaultExpandedArr" :show-checkbox="c...
可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
02-28
在 Vue 项目中，你需要先引入 Element UI，并在组件中声明 el-tree，通过 `data` 属性传递树的数据结构，通过 `props` 设置显示样式和交互行为。 ```html <el-tree :data="treeData" :props="defaultProps" ref=...
vue 为element树形组件el-tree添加虚线，指示线
热门推荐
吕大瓜的博客
08-11 1万+
需求需要实现一个带有指示线的树形组件，项目用的Vue，树形组件使用的是element的el-tree，所以想直接在element的组件上直接改样式实现。 先看最终实现的效果图： 思路 在控制台查看 el-tree 渲染后的HTML结构，找到相应的节点添加伪元素，利用伪元素的border属性加上定位实现虚线效果。 渲染后HTML结构如下，可发现树的结构是由一个类名为 el-tree-node 的div包裹着两个分别代表节点本身和子节点集的div 递归遍历生成的，类名为 el-tree-node 的div就是
【Vue项目实战7】【ElementUI样式优化】el-tree==＞添加分级图标==＞添加引导线样式==＞【node-click】点击节点展示全部父节点信息==＞使用$store封装全局组件使用
Sabrina_cc的博客
06-20 5135
【Vue项目实战7】【ElementUI样式优化】el-tree==>添加分级图标==>添加引导线样式==>【node-click】点击节点展示全部父节点信息==>使用$store封装全局组件使用
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
el-tree树形控件自定义节点样式，动态添加icon图标
weixin_50255994的博客
05-24 1万+
先放element默认样式及代码： 需要实现的样式如下图： 这里提一下，动态添加图标使用的是Slot自定义树节点的内容,需要注意的是自定义树节点的内容，参数为 { node, data } 设置文字及图表样式可通过添加自定义类名设置 <!-- HTML片段 --> <el-tree class="filter-tree" :data="data" node-key="id" :props="defaultProps" highlight-current def...
vue使用element树形组件 如何修改树形组件图标 让展开和收缩显示不同的图标
greed
08-17 2757
如何修改树形组件前的svg图标 成品效果图 代码实现 使用树形组件中的作用域插槽 让scope接收参数对象 打印scope得知 如图1 expanded属性展开的时候为true 收缩的时候为false v-if判断还有没有子项 图1 //树形组件中的作用域插槽 <template #default="scope"> <el-col :span="20"> <svg-icon v-if="scope.data.children.
elementu - tree -分别设置 展开时图标 和 收起时图标
weixin_43413047的博客
06-04 1615
/* 引用 elementui - tree*/ <el-tree class="tree" :data="data" node-key="groupId" @node-click="asideCodeClick" :highlight-current="true" default-expand-all :props="defaultProps"> </el-tree> /*树形表格的
一个做展开/收起动作（加过渡效果）的组件（vue3+ts+antd的图标）
qq_41775006的博客
08-13 1178
提示：用哪个组件库就把icon换成哪家的图标就行了 效果图 expand组件 <template> <div class="expand" :style="'width:' + width + 'px'"> <div class="expand-header"> <div class="expand-header-title">{{ title }}</div> <!-- ant-Design 的图标
elementPlus-tree 自定义展开，收起图标
海带的博客
08-22 2021
elementPlus-tree 自定义展开，收起图标
在vue中使用element 修改树状结构的图标
weixin_34212189的博客
05-07 5733
原效果如下：修改样式后显示效果如下：实现的目标是，点开的节点前面的图标与未点开的节点不同，并且叶子节点前没有图标。template的写法如下：<div style="width: 20%;margin-right:1rem;"> <el-tree :data="treeDataList" :props="defaultProps" @node-click="han...
修改 element tree 组件折叠和展开的图标
斑斓 小星愿的博客
03-18 5442
树节点中的图标 官网文档中介绍了，可以通过renderContent来设置，那折叠和展开的图标小三角怎么修改成想用的其他图标呢。 我现在是需要改成 在浏览器中查看元素可知 嗯，覆盖图标原来的content内容。 .el-tree-node__content .el-icon-caret-right:before{ content: "\E604"; } content 的内容可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值