ElementUI：tree组件背景色、鼠标hover悬浮背景色、选中背景色修改

在ElementUI中，要修改Tree组件的背景色、鼠标hover悬浮背景色和选中背景色，可以通过CSS覆盖默认的样式。以下是实现的方法和示例代码：

1. 通过CSS修改背景色：

/* 修改Tree组件的背景色 */
.el-tree {
  background-color: #f0f2f5; /* 你想要的背景色 */
}
 
/* 修改Tree节点hover时的背景色 */
.el-tree-node__content:hover {
  background-color: #eaeaea; /* 你想要的hover背景色 */
}
 
/* 修改Tree选中节点的背景色 */
.el-tree .is-current {
  background-color: #bfcbd9; /* 你想要的选中背景色 */
}

2. 如果你使用了scoped的CSS，可能需要使用深度选择器 >>> 或 /deep/ 来确保样式能够穿透组件边界。

/* 如果是在Vue单文件组件中，并使用了scoped样式 */
<style scoped>
.el-tree >>> .el-tree-node__content:hover {
  background-color: #eaeaea;
}
 
.el-tree >>> .is-current {
  background-color: #bfcbd9;
}
</style>

或者使用SASS/SCSS时可以这样写：

/* 如果是在SASS/SCSS文件中 */
.el-tree {
  background-color: #f0f2f5;
 
  .el-tree-node__content:hover {
    background-color: #eaeaea;
  }
 
  .is-current {
    background-color: #bfcbd9;
  }
}

将以上CSS添加到你的项目样式文件中，并确保它在组件样式之后加载，以覆盖默认的样式。如果你使用了本地的ElementUI定制主题功能，可以在element-variables.scss文件中修改对应的变量。