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

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

默认样式:

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

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

我的全部代码

 

              
                
                  
                  
                    

                    
                    {{ data.fullName |Formatstr(7)}}
                  
                  
                  
                    
                  
                
              

            

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

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

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

鼠标悬停显示图标:

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