elementui 樹形控件節(jié)點自定義圖標 初始化自定義節(jié)點顏色

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

實現(xiàn)效果:


image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容