elementui 树形控件节点自定义图标 初始化自定义节点颜色

<el-tree
             :data="treeData"
                :props="defaultProps"
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :current-node-key="currentNodekey"
                check-strictly
                :filter-node-method="filterNode"
                @node-click="handleNodeClick">
                     //不可与renderContent共存
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>
                          <i class="el-icon-company" v-if="data.icon === 'el-icon-success'"></i>//后台返回
                          <i class="el-icon-project" v-if="data.icon === 'el-icon-info'"></i>//后台返回
                          <span v-if="firstId == data.id" style="color:#409EFF;">{{ node.label }}</span>
                          <span v-if="checkedId == data.id" style="color:#409EFF;">{{ node.label }}</span>
                          <span v-if="firstId != data.id&&checkedId != data.id">{{ node.label }}</span>
                        </span>       
                      </span>
            </el-tree>

样式elementui 自定义图标

.el-icon-company{
         background: url(../../../assets/image/frame.png) center no-repeat;
         background-size: cover;
         margin-right: 6px;
    }
    
    .el-icon-company:before{
        content: "替";
        font-size: 16px;
        visibility: hidden;
    }
    .el-icon-project{
        background: url(../../../assets/image/project.png) center no-repeat;
        background-size: cover;
         margin-right: 6px;
    }
    .el-icon-project:before{
        content: "替";
        font-size: 16px;
        visibility: hidden;
    }

实现效果:


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。