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是作用域限定符，用于限定样式只在当前组件中生效。这样就可以在选中节点时改变其背景颜色了。

--相关问题--:

相关问题

el-tree 选中的节点高亮

### 实现 `el-tree` 组件中选中节点高亮

为了使 `el-tree` 组件中的节点在被点击时能够保持高亮状态，可以利用 `highlight-current` 属性以及设置 `node-key` 来唯一标识每个节点。这允许组件追踪当前激活的节点并应用样式[^1]。

当配置好这些属性之后，还需要通过监听事件来动态更新所选节点的状态。具体来说：

- 设置 `highlight-current="true"` 可以让每次只有一项处于选中状态，并自动为其添加默认样式。
- 使用 `default-expanded-keys` 和 `current-node-key` 控制初始状态下哪些节点应该展开或被选中。

下面是一个简单的例子展示如何实现这一功能:

<template>
  <div class="tree-container">
    <!-- 配置 highlight-current=true -->
    <el-tree :data="data" show-checkbox node-key="id"
             default-expand-all
             :expand-on-click-node="false"
             @node-click="handleNodeClick"
             highlight-current>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: 'Level one 1',
        children: [{
          id: 4,
          label: 'Level two 1-1'
        }]
      }, {
        id: 2,
        label: 'Level one 2',
        children: [{
          id: 5,
          label: 'Level two 2-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log('Selected Node:', data);
    }
  }
};
</script>

此代码片段展示了基本结构和必要的选项配置，使得用户可以在树状列表里选择项目并且看到视觉上的反馈——即选定项目的背景颜色会发生变化，从而达到所谓的“高亮”。

对于更复杂的场景，比如希望页面刷新后仍然能记住之前的选择，则可以通过浏览器本地存储或者其他方式保存 `current-node-key` 的值，在页面加载时重新赋给该属性即可[^3]。

el-tree点击选中高亮

要实现el-tree点击选中高亮效果，可以通过以下步骤实现：

1. 在el-tree组件中添加@click事件监听树节点的点击事件；
2. 在@click事件中获取当前点击的节点对象，可以通过参数（node, instance）获取；
3. 使用el-tree组件提供的setCurrentKey方法设置当前节点的key值，使其选中并高亮；
4. 在样式中为选中的节点添加高亮效果，可以使用el-tree组件提供的node-key属性来设置节点的唯一标识，然后通过自定义样式来实现高亮效果。

示例代码如下：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    @click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '节点1',
          children: [
            {
              label: '子节点1'
            },
            {
              label: '子节点2'
            }
          ]
        },
        {
          label: '节点2',
          children: [
            {
              label: '子节点3'
            },
            {
              label: '子节点4'
            }
          ]
        }
      ],
      treeProps: {
        label: 'label',
        children: 'children'
      }
    }
  },
  methods: {
    handleNodeClick(node, instance) {
      // 设置当前节点选中并高亮
      instance.setCurrentKey(node.key);
    }
  }
}
</script>

<style>
.el-tree-node--highlight {
  background-color: #f5f5f5;
}
</style>