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

2023-09-01 2994

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

默认样式:

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

.groupList {
 ::v-deep .el-tree-node {         
              .el-icon-caret-right {
                display: none;
              }             
          }
}

83675c18cda8842b16c09666e25ad7fe_cf5e57acbae44d7196fae76330c983f0.png

我的全部代码

 <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>

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

d1ccffa3bfc35decaff434193caa37ef_36151017c20d439aa72edb45b6be8588.png

我的每条数据都自带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;
              }
            }
          }
}