el-tree背景色

### 设置 Element UI `el-tree` 组件的背景颜色

为了设置 `el-tree` 组件的背景颜色，可以通过自定义 CSS 或者 SCSS/Less 来覆盖默认样式。具体方法如下：

#### 方法一：全局样式调整
如果希望在整个项目中统一应用新的背景色，则可以在项目的公共样式文件（如 `app.css` 或 `styles.less`）中添加以下代码[^2]。

/* 修改整个 tree 的背景 */
.el-tree {
    background-color: #f9fafc;
}

/* 如果还需要修改节点内部容器的颜色 */
.el-tree-node__content {
    background-color: transparent !important; /* 节点点击后的选中状态保持透明或其他指定颜色 */
}

#### 方法二：局部作用域内修改
当只需要针对某个特定页面或组件内的 `el-tree` 更改其外观时，在该组件对应的 `<style>` 标签下加入相应规则即可。需要注意的是要确保这些样式仅对该实例生效而不影响其他地方使用的相同组件[^3]。

<template>
  <!-- ... -->
</template>

<script setup>
// ...
</script>

<style scoped lang="scss">
@import "~element-plus/lib/theme-chalk/index.css";

.custom-tree-container {
  .el-tree {
      background-color: #eef1f6;

      ::v-deep(.el-tree-node__content) { // 对于较新版本可能需要使用 :deep() 替代 ::v-deep()
          &:hover,
          &.is-current {
              color: white;
              background-color: rgb(64, 158, 255)!important;
          }
      }

      // 额外定制化需求可以继续补充更多选择器...
  }
}
</style>

通过上述两种方式之一就可以成功更改 `el-tree` 控件的整体视觉效果中的背景部分了。记得测试不同浏览器下的显示情况以确认兼容性和预期行为一致[^4]。