ElementUI 自定义 Tree 树形控件背景；Tree 树形菜单组件

在ElementUI中，要自定义Tree组件的背景，你可以通过CSS覆盖默认的样式来实现。以下是一个简单的例子，展示如何为Tree组件设置自定义背景色。

首先，在你的Vue项目中的样式文件（例如App.vue或者单独的CSS文件）中添加以下CSS规则：

/* 覆盖Tree组件的背景色 */
.el-tree {
  background-color: #f5f5f5; /* 你想要的背景色 */
}
 
/* 如果你想要为树节点添加背景色，可以覆盖节点的样式 */
.el-tree .el-tree-node__content {
  background-color: #ffffff; /* 节点的背景色 */
}
 
/* 当鼠标悬停节点时的背景色 */
.el-tree .el-tree-node__content:hover {
  background-color: #f0f0f0;
}

然后，在你的Vue组件中使用Tree组件：

<template>
  <el-tree
    :data="data"
    class="custom-tree"
    :props="defaultProps">
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [/* 你的树形数据 */],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>
 
<style>
/* 引入上面定义的CSS样式 */
.custom-tree {
  background-color: #f5f5f5;
}
.custom-tree .el-tree-node__content {
  background-color: #ffffff;
}
.custom-tree .el-tree-node__content:hover {
  background-color: #f0f0f0;
}
</style>

在这个例子中，.custom-tree 类被添加到 <el-tree> 组件上，以便我们可以直接在样式文件中为它设置自定义的背景色。同时，我们覆盖了 .el-tree-node__content 类来设置节点的背景色，以及当鼠标悬停时的背景色。

确保将CSS规则放在合适的位置，这样它们就能被加载并应用到Tree组件上。如果你使用了模块化的CSS解决方案（如SCSS或LESS），请确保正确地导入这些样式。