这里的图标使用的font-awesome,所以使用前需要先安装font-awesome字体图标组件
移出旧图标
tree 有单独设置图标的方法icon-class ,但是需要设置两个不一样的图标,所以就不用他的方法了。置空就可以了。
icon-class=" "
使用新图标
<el-tree
node-key="id"
:data="organizationTree"
:props="defaultProps"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
icon-class=" "
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{node, data}">
<span :class="{'text-green': treeLeaf(data)}">
<i :class="['fa', {'fa-sitemap' : !treeLeaf(data),'fa-camera': treeLeaf(data)}]" class="mr10"></i>
<span class="ellipsis" style="user-select:none;" :title="node.label">{{ node.label }}</span>
</span>
</span>
</el-tree>
js
expandedKeys: [],
checkedKeys: [],
organizationTree: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
方法
methods: {
treeLeaf(data) {
return !data.children;
},
}
样式
.mr10{
margin-right: 10px;
}
::v-deep {
/* 设置树形最外层的背景颜色和字体颜色 */
.el-tree {
color: #fff;
background: transparent;
width: calc(100% - 40px);
margin-left: 20px;
}
/* 设置三角形图标的颜色 */
.el-tree-node__expand-icon {
color: #fff;
}
/* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
.el-tree-node__content:hover .el-tree-node__expand-icon {
color: rgba(0, 164, 255, 1);
}
/* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
color: transparent;
} */
/* 树节点鼠标悬浮式改变背景色,字体颜色 */
.el-tree-node__content:hover {
background: none;
color: rgba(0, 164, 255, 1);
}
/* 改变节点高度 */
.el-tree-node__content {
height: 36px;
}
/* 节点前边的三角图标并不会被节点样式影响,需要单独修改 当前激活的颜色*/
.el-tree-node:focus
> .el-tree-node__content
.el-tree-node__expand-icon {
color: rgba(39, 114, 229, 1);
}
/* 改变被点击节点背景颜色,字体颜色 */
.el-tree-node:focus > .el-tree-node__content {
background: none;
color: rgba(0, 164, 255, 1);
}
}