【el-tree】树形组件图标的自定义

这篇具有很好参考价值的文章主要介绍了【el-tree】树形组件图标的自定义。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

饿了么树形组件的图标自定义

默认样式:

【el-tree】树形组件图标的自定义,vue.js,elementui,前端

 可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它隐藏::

.groupList {
 ::v-deep .el-tree-node {         
              .el-icon-caret-right {
                display: none;
              }             
            
          }
}
【el-tree】树形组件图标的自定义,vue.js,elementui,前端
我的全部代码
 <div class="groupList">
              <el-tree :data="groupList" node-key="id" :default-expanded-keys='defaultexpande'
                :highlight-current="true" :props="defaultProps" @node-drop="handleDrop" draggable
                :allow-drop="allowDrop" :allow-drag="allowDrag" @node-click='toogleForm' ref='tree'>
                <span slot-scope="{ data }" class="span__" style="padding-left:6px;">
                  <span :class="data.icon" style="margin-right:10px;"></span>
                  <el-tooltip effect="dark" placement="top" :visible-arrow='false' :open-delay='500'
                    :enterable="false">
                    <div slot="content" v-html="data.fullName">
                    </div>
                    <span class="tree-node-span"
                      style="color:black;">{{ data.fullName |Formatstr(7)}}</span>
                  </el-tooltip>
                  <span class="rightButton2">
                  
                    <span class="iconfont icon-more-grid-big"></span>
                  </span>
                </span>
              </el-tree>

            </div>

其中自定义左侧图标的方法:

【el-tree】树形组件图标的自定义,vue.js,elementui,前端

 我的每条数据都自带icon属性,你没有的话也可以在数据拿到之后手动遍历添加一条icon属性进去,然后再el-tree中使用:

   <span :class="data.icon" style="margin-right:10px;"></span>

如果需要点击改变图标的话就点击改变data中的icon属性即可。 但是先确认是否已经定义好icon对应的图标.

鼠标悬停显示图标:

<span class="rightButton2">        
     <span class="iconfont icon-more-grid-big"></span>
        </span>
   </span>
css

将右侧图标默认隐藏,悬停显示即可

.groupList{
 ::v-deep .el-tree-node {
            .el-tree-node__content {   
            .rightButton2{
              visibility: hidden;
                     }
                   
              &:hover .rightButton2 {
                visibility: visible;
              }
            }
          }
}  

【el-tree】树形结构拖拽,修改分组https://blog.csdn.net/weixin_64530670/article/details/132372128文章来源地址https://www.toymoban.com/news/detail-672195.html

到了这里,关于【el-tree】树形组件图标的自定义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-tree自定义图标,使用图片或者dom自定义图标,element-plus

    el-tree自定义左侧的图标,有很多方法 第一种:通过css类获取到el-tree-node__expand-icon图表类,然后通过设置类名,修改css样式来改变图标。 第二种:通过js直接将el-tree-node__expand-icon元素移除,直接替换掉DOM。 以上两种都是比较刻板的方法,第一种适用于element-ui。 第三种:el

    2024年02月14日
    浏览(52)
  • vue2+element-ui el-tree树形控件封装

    1.封装 根据官网配置项封装了下el-tree 方便维护和复用,有用的话点赞收藏叭~ 2.使用 如若要对不同的一级二级节点设置不同的样式可以参考这样:

    2024年02月12日
    浏览(60)
  • el-tree树回显删除某项,再次点开树形组件无变化,实际数据已改变

    页面有添加和删除已选选项的按钮,点击删除一个选项,再点添加,打开树形弹窗,发现弹窗被删除的选项还在 原因 : 发现是添加的时候,调的方法是,el-tree树形组件里check方法,这是错误的 初始化会根据default-checked-keys属性,默认已选项,直接勾选对应值,而不是通过

    2024年02月11日
    浏览(40)
  • 在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件

    有时遇到一些需求就是在使用树形控件时,服务端并没有一次性返回所有数据,而是返回首层节点列表。然后点击展开首层节点中的某个节点,再去请求该节点的子节点列表,那么就得用上懒加载的机制了。在此以ElementPlus的树形控件为例,实现一个具有懒加载的树形控件的

    2024年02月06日
    浏览(64)
  • 【el-tree】树形结构拖拽,修改分组

    背景: 项目中有个左侧菜单,并且各级菜单中的元素是可以拖拽到别的菜单中去,也就是树形结构拖拽修改分组,下面我介绍我项目中使用el-tree进行拖拽分组的方式. 效果: 拖拽到某个节点的前后 首先我们使用的是饿了么组件中的[el-tree]组件,他本身是自带拖拽功能的,只需要加上一

    2024年02月12日
    浏览(91)
  • VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线

    定义模板(做循环遍历处理): tree的参数说明请参考官方文档 el-tree 定义模板数据: js部分: 指示线样式部分: 实际效果:

    2024年02月11日
    浏览(72)
  • 自定义el-tree复选框选中状态vue elementUI

    :check-strictly属性:该属性默认false,表示严格遵循父子相互关联。父子相互关联(即选中父节点其所有子节点全部选中,取消选中父节点其子节点全部取消,且折叠、展开状态都一样)。 Attributes属性 参数 说明 类型 可选值 默认值 check-strictly 在显示复选框的情况下,是否严格

    2023年04月09日
    浏览(38)
  • element-ui树形控件el-tree详解

    概述 这里我利用element-ui开发一个vue的树形组件 引入element-ui 安装element-plus 安装按需导入 修改vite.config.js配置按需加载 tree树形控件详解 属性名 说明 类型 可选值 默认值 data 展示数据 array — — empty-text 内容为空的时候展示的文本 string — — node-key 每个树节点用来作为唯一标

    2024年02月07日
    浏览(115)
  • 【el-tree查询并高亮】vue使用el-tree组件,搜索展开并选中对应节点,高亮搜索的关键字,过滤后高亮关键字,两种方法

    效果图这样的,会把所有的有这些的节点都展开 代码: 这里的逻辑就是通过递归循环把所有和匹配的节点筛选出来 然后通过setCheckedKeys方法把他展开选中 然后通过filterReal把高亮标蓝 这个是用的官方文档的那个过滤方式,可以参考官方文档看一下。 只不

    2024年02月15日
    浏览(69)
  • vue3使用element-plus 树组件(el-tree)数据回显

    html搭建结构 js 非常好用,拿过来修改一下check事件,ref获取就直接可以使用了 

    2024年04月09日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包