<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
网友评论