element UI中的el-tree的父子节点添加动态图标

最新推荐文章于 2024-07-18 15:51:06 发布
最新推荐文章于 2024-07-18 15:51:06 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： VUE 文章标签： vue elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45959912/article/details/112574380
版权
在Vue项目中，使用Element UI的el-tree组件时，遇到需求：根据后台返回的菜单数据，为每个节点动态显示不同的图标。通过解决这个问题，实现了父子节点各自拥有独特的icon。
摘要由CSDN通过智能技术生成

el-tree的父子节点添加动态icon

最近做的项目，需要给el-tree菜单，展开后的父子节点带有它们自己的icon，因为这个菜单数据是从后台获取的，每一个节点都有属于它们的icon
解决方案如下：

<el-tree
          :data="datalist"
          :props="defaultProps"
          ref="dataRef
最低0.47元/天 解锁文章
田不甜 tbt
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
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...
Element-ui el-tree不同节点使用不同图标
qq_39691676的博客
08-06 3682
icons:{ category:'categoryTreeIcons', table:'tableIcon', class:'classIcon' },
el-tree动态添加子节点的问题
最新发布
行走的过客
07-18 633
如果我们需要动态往el-tree里面某一个节点添加子节点，追加或删除，我跟你讲，一定要显式地调用el-tree的方法，不然的话，后面调用setChecked这种方法看不到效果的。这时候，如果你没有显示地调用el-tree的append方法的话，页面当中的el-tree仍然会正常地显示新加元素，于是我还以为好了呢。[{id:"1“，label："父1”，children:[id:“1-2”,label:“子”,children:[]]}][{id:"1“，label："父1”，children:[]}]
element-ui树形结构动态全部展开收起及添加图标
a1056189154的博客
06-10 3785
一：template部分 node-key="id"很重要 <el-tree :data="sourceData" :props="{ label: 'name' }" highlight-current default-expand-all ref="selectTree" :expand-on-click-node="false" node-key="id" > <!--
elment-ui树形控件添加图标
flaw_saint的博客
02-20 863
/deep/ .is-leaf{ background: transparent !important; width: 5px; height: 5px; background-size: 100%; margin-right: 5px; } /deep/ .el-tree-node__expand-icon{ background: url(../../../../assets/shu_ic_wzk.png) no-repeat; width: 5px; height: .
Vue3 树型-自定义结点(动态icon图标)
weixin_44190874的博客
12-28 1467
Vue3 树型-自定义节点(动态icon图标)
element-ui的el-tree节点含有图片，收起展开图片会卡顿
qq_43151592的博客
04-24 512
解决element-ui的el-tree节点含有图片，收起展开图片会卡顿
Element-UI中el-tree的使用
热门推荐
GZZ__z的博客
10-27 1万+
写项目时经常会遇到使用el-tree的场景，针对用过的，做个简单记录 一，先简单讲一下怎么安装element-ui： 1.安装： npm i element-ui 2.在main.js中引入样式以及组件： import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 3.丢个官网在这里，详细可以去查看： Element - The world's m.
Element-ui el-tree 父节点不显示复选框 子节点显示复选框
weixin_44100313的博客
01-05 7335
需求：父节点不显示复选框 子节点显示复选框 一 . 父节点不显示复选框 子节点显示复选框(如图) 二 . 改后效果(如图) 三 . 上代码(如图) 添加css样式 .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{display: inline-block;} .el-tree .el-tree-node .el-checkbox .el-checkbox__inner{display: none;} 希望对你有用!
【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx
12-28
在JavaScript的前端开发中，Element UI 是一个常用的UI库，提供了丰富的组件，其中包括el-tree，一个用于构建树形结构的组件。在el-tree中，如果需要实现多选（复选框）功能，我们可以利用`show-checkbox`属性来开启...
element-ui el-tree 设置指定级别节点显示复选框el-checkbox
weixin_43899694的博客
05-13 5722
将一个选择框去掉，变成下图↓ 开始想到 选中第一个el-checkbox 隐藏 .my-tree .el-tree-node__content label.el-checkbox:nth-child(1) { display: none; } 但是这样写无效，选不到 百度到一些大神通过修改elementui源码实现 emm咸鱼不想看 最后想到可以既然不能单独去掉父级的，那就先全部去掉，再给子级的加上↓ .my-tree .el-tree-node__content label.el-checkbo.
element plus的icon使用及动态调用
m0_64590669的博客
10-27 1049
element plus的icon使用及动态调用
ElementUI el-tree 树形控件给节点添加图标
Cupid
10-15 804
ElementUI el-tree 树形控件给节点添加图标 TreeData为后端获取到的数据 <el-tree :expand-on-click-node="false" style="width:180px" class="tree filter-tree" :indent="0" ...
修改 element tree 组件折叠和展开的图标
斑斓 小星愿的博客
03-18 5410
树节点中的图标 官网文档中介绍了，可以通过renderContent来设置，那折叠和展开的图标小三角怎么修改成想用的其他图标呢。 我现在是需要改成 在浏览器中查看元素可知 嗯，覆盖图标原来的content内容。 .el-tree-node__content .el-icon-caret-right:before{ content: "\E604"; } content 的内容可以通过...
关于element-plus中动态渲染icon的方法
qq_39287986的博客
11-29 1061
【代码】关于element-plus中动态渲染icon的方法。
ElementUI el-tree 树形控件自定义给节点添加图标
WarrenLee的博客
02-03 7124
<el-tree :data="data" node-key="id" :props="defaultProps"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <!-- data.icon为data里的icon属性，用于识别icon图片 --> <i
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田不甜 tbt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值