美文网首页
elementui 树形控件节点自定义图标 初始化自定义节点颜

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

作者: 布呐呐aa | 来源:发表于2021-12-30 16:46 被阅读0次
<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

相关文章

网友评论

      本文标题:elementui 树形控件节点自定义图标 初始化自定义节点颜

      本文链接:https://www.haomeiwen.com/subject/rmoiqrtx.html