直接上代码
样式scss:
.tree_container{
height: 500px;
border-radius: 5px;
background-color: rgba(1,28,82,.5);
}
.el-tree{
background: transparent;
color: #fff;
/*改变高度*/
.el-tree-node__content{
height: 50px;
}
/*tree组件选中背景色修改 */
.el-tree-node.is-current > .el-tree-node__content{
background-color: rgba(1,68,144,.5);
}
/*tree组件鼠标hover悬浮背景色 */
.el-tree-node > .el-tree-node__content:hover{
background-color: rgba(1,68,144,.5);
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 20px;
}
}
结构
<div class="tree_container">
<el-tree
:data="departmentData"
:props="defaultTypeProps"
node-key='id'
:default-expand-all="true"
:render-content="renderContent"
>
</el-tree>
</div>
defaultTypeProps: {
children: 'children',
label: 'name'
},
departmentData: [],
// tree添加元素
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span style="color: #04b5ff">{data.value}</span>
</span>);
},