页面结构:
<el-tree
style="max-width: 600px"
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
node-key="id"
highlight-current />
css设置:
/* 鼠标浮动过的背景颜色 */
.el-tree-node__content:hover {
background: #0074b7;
}
/* 鼠标点击时节点的背景颜色 */
.el-tree-node:focus>.el-tree-node__content {
background-color: #0074b7 !important;
color: rgb(255, 255, 255);
}
/* 鼠标失去焦点时节点背景的颜色 */
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background: rgb(0, 129, 204);
}
需要注意的是: 如果项目中使用了scss、less,以上代码可能不生效,遇到这种情况则需要再加一个<style>标签来写这部分css样式。