elementui树形组件自定义高亮颜色

在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属性以实现自定义的高亮颜色。