在Element UI的树形组件中，要自定义高亮颜色，可以通过CSS覆盖默认的样式。以下是一个简单的例子，展示如何实现这一需求：
首先，在你的组件的<style>标签中或者单独的CSS文件中，添加相应的CSS规则来覆盖默认的样式。
/* 覆盖节点高亮颜色 */
.el-tree .is-current {
background-color: #f5f7fa; /* 自定义的高亮背景色 */
color: #409eff; /* 自定义的高亮文本色 */
}
/* 覆盖节点hover状态颜色 */
.el-tree-node__content:hover {
background-color: #f5f7fa; /* 自定义的hover背景色 */
}然后，在你的Vue组件中，确保引入并使用了Element UI的树形组件：
<template>
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</template>
<script>
export default {
data() {
return {
data: [/* 树形数据 */],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
// 节点点击时的处理逻辑
}
}
};
</script>
<style>
/* 覆盖节点高亮颜色的CSS */
.el-tree .is-current {
background-color: #f5f7fa;
color: #409eff;
}
.el-tree-node__content:hover {
background-color: #f5f7fa;
}
</style>在这个例子中，.el-tree .is-current 用于定义当前高亮节点的样式，.el-tree-node__content:hover 用于定义节点hover状态的样式。你可以根据需要修改background-color和color属性以实现自定义的高亮颜色。