el-tree自定义展示图标

古城微笑少年丶 2023-01-15 15:30 268阅读 0赞

先演示效果图  
![在这里插入图片描述][20210423105127866.gif]  
代码部分

<el-dialog title="选择资源保存路径" :visible="dialogVisible" width="650px" @close="close" :destroy-on-close="true">
        
        <div class="tree-contain">
          <el-tree node-key="id" lazy :load="loadNode" :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true" v-loading="list.loading" @node-click="nodeClick" ref="tree">
            <div class="custom-tree-icon" slot-scope="{ node, data }">
              <i :class="['icon-color icon iconfont', (node.expanded && node.isLeaf) ? 'icon-folder' : 'icon-folder-open']"></i> 
              {
       { data.name }}
            </div>
          </el-tree>
        </div>
      </el-dialog>

主要是这部分代码

<div class="custom-tree-icon" slot-scope="{ node, data }">
      <i :class="['icon-color icon iconfont', (node.expanded && node.isLeaf) ? 'icon-folder' : 'icon-folder-open']"></i> 
      {
       { data.name }}
    </div>

[20210423105127866.gif]: /images/20221022/e3544d2895834de68eac491c9e390a7d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现自定义图标

引言在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验...

╰半橙微兮°/ 2024年04月18日 05:12/ 0 赞/ 10 阅读

相关 Spring自定义启动图标（个性化启动图标）

> > 今天比昨天好，这就是希望。☀️☀️☀️ > 文章目录个性化输出图片转换输出生成banner的网站

你的名字/ 2023年09月28日 20:05/ 0 赞/ 73 阅读

相关 uni-app 自定义图标

[https://blog.csdn.net/IT\_iosers/article/details/113278091][https_blog.csdn.net_IT_iose

刺骨的言语ヽ痛彻心扉/ 2023年01月23日 13:50/ 0 赞/ 206 阅读

相关 el-tree自定义展示图标

先演示效果图 ![在这里插入图片描述][20210423105127866.gif] 代码部分 <el-dialog title="选择资源保存路径" :vi

古城微笑少年丶/ 2023年01月15日 15:30/ 0 赞/ 269 阅读

相关 springboot自定义图标banner

只需要在你的springboot项目里加入这个文件再把图片放进去就可以了 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

Bertha 。/ 2022年11月02日 03:51/ 0 赞/ 187 阅读

相关 Bootstrap 字体图标和自定义矢量图标

一、Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标。使用：将图标类

朱雀/ 2022年03月22日 15:47/ 0 赞/ 401 阅读

相关 mui自定义图标

研究了一下自定义图标，不仅仅可以在h5里面用，还可以在小程序或者别的开发环境里面用。首先找到图标源，我自己找的是阿里巴巴矢量图库。 ![watermark_type_Zm

曾经终败给现在/ 2022年03月19日 17:40/ 0 赞/ 375 阅读

相关 li自定义图标

/自定义list的图标/ li{ list-style-image: url(../img/21.JPG); } 转载于:htt

短命女/ 2021年10月01日 03:34/ 0 赞/ 434 阅读

相关自定义图标列表

采用GDI+绘图。可以贴入自己想要的图片，支持png，bmp，jep等格式的图片，并且图片可以自适应大小。效果图： ![20170827233118933][] 源

布满荆棘的人生/ 2021年09月22日 08:10/ 0 赞/ 437 阅读

相关 easyui 添加自定义图标

最近用easyui发现图标挺少的，其实可以另外添加一个css样式，不过我偷懒，直接在easyui的css里面添加了。下面是目录： ![Center][] icon.c

悠悠/ 2021年08月19日 21:58/ 0 赞/ 580 阅读