改变el-tree选中的颜色

要改变 `el-tree` 组件中选中节点的颜色，可以使用以下 CSS 样式：

.el-tree-node.is-selected>.el-tree-node__content {
  background-color: #f0f0f0; /*设置选中的背景色*/
  color: #333; /*设置选中时的文字颜色*/
}

你可以将上述样式添加到你的全局样式表中，或者将其添加到单个 `el-tree` 组件的作用域样式中。

相关问题

el-tree改变选中颜色

el-tree组件是Element UI库中的一个用于树状数据展示的组件。如果你想在用户点击节点时改变选中的颜色，你可以通过监听`node-click`事件，并在该事件处理器中更改选中状态的颜色。首先，你需要设置一个`default-checked-color`属性来定义默认选中颜色，然后在事件处理函数中更新选中的节点样式。

示例代码如下：

<template>
  <el-tree
    :data="treeData"
    :default-checked-color="#0090FF"   <!-- 设置默认选中颜色 -->
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: ...  // 你的树状数据
    };
  },
  methods: {
    handleNodeClick(node) {
      if (node.checked) {  // 如果节点已选中
        node.color = '#fff';  // 更改颜色为白色或其他你喜欢的颜色
      } else {
        node.color = '#0090FF';  // 否则恢复为默认颜色
      }
      node.setChecked(true);  // 更新节点的选中状态
    }
  }
};
</script>

el-tree选中高亮

el-tree选中高亮的方法有两种，一种是通过设置highlight-current属性为true来使选中的节点高亮显示，另一种是通过设置样式来改变选中节点的背景颜色。具体方法如下：

1. 设置highlight-current属性为true：

el-tree组件的highlight-current属性默认为false，如果我们要让选中的节点高亮显示，就需要将其设置为true。代码如下：

<el-tree :data="data" :highlight-current="true"></el-tree>

当选中节点时，会自动添加一个el-tree-node__current类名，我们可以通过设置样式来改变选中节点的背景颜色。

2. 设置样式来改变选中节点的背景颜色：

我们可以通过在样式中设置/deep/ .el-tree-node:focus > .el-tree-node__content来改变选中节点的背景颜色。代码如下：

<style scoped>
/deep/ .el-tree-node:focus > .el-tree-node__content {
background-color: rgb(158, 213, 250) !important;
}
</style>

这里的scoped是作用域限定符，用于限定样式只在当前组件中生效。这样就可以在选中节点时改变其背景颜色了。

--相关问题--: