el-tree自定义展示图标

古城微笑少年丶 2023-01-15 15:30 357阅读 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 条评论，357人围观）

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

相关阅读

相关 MUI实现自定义图标

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

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

相关 ExtJs自定义iconCls图标

在style.css中修改加入 .excel \{ background-image:url(../images/excel.png) !important; \}

野性酷女/ 2024年02月19日 19:59/ 0 赞/ 51 阅读

相关 uni引入自定义图标

项目中需要引入阿里图库的字体图标首先在阿里上下载图标源码解压后，只需2个文件就可以 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shad

朴灿烈づ我的快乐病毒、/ 2023年06月10日 08:25/ 0 赞/ 26 阅读

相关 uni-app 自定义图标

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

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

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

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

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

相关 springboot自定义图标banner

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

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

相关 mui自定义图标

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

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

相关 li自定义图标

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

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

相关自定义图标列表

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

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

相关 easyui 添加自定义图标

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

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