Element Plus UI组件库中的树状控件如何设置选中节点的颜色？

在Element Plus UI组件库中，树状控件通常被称为`el-tree`。要设置选中节点的颜色，你需要配置`node-key`属性，这个属性用于唯一标识每个节点。然后，你可以通过自定义渲染函数来自定义当选中状态改变时节点的样式。

首先，在Vue组件中引入`element-plus`并安装`@element-plus/tree`：

npm install element-plus @element-plus/tree

接下来，在模板中使用`el-tree`组件，并设置`node-key`，例如假设你的节点数据有`id`字段：

<template>
  <el-tree :data="treeData" node-key="id" :props="{ children: 'children', label: 'name' }" ref="tree">
    <!-- ... -->
  </el-tree>
</template>

为了设置选中节点颜色，你需要在组件的script部分添加一个计算属性或者在`methods`中创建一个方法来修改选中节点的样式。这里是一个简单的例子，使用`v-if`来控制选中节点的CSS类：

<script setup>
import { computed, onMounted } from 'vue';

const treeData = ... // 你的数据源

// 定义一个计算属性，当节点被选中时应用特定的class
const selectedNodeColor = computed(() => {
  return this.$refs.tree.getNode(this.selectedNodeId)?.classes;
});

onMounted(() => {
  // 当选中状态改变时更新selectedNodeId变量
  this.$refs.tree.on('node-click', (node) => {
    if (node.data.id === this.selectedNodeId) {
      this.selectedNodeId = null; // 如果已经选中则取消选中
    } else {
      this.selectedNodeId = node.data.id;
    }
  });
});
</script>

<style scoped>
.el-tree-node.is-selected .custom-node-color {
  background-color: your-desired-color; /* 替换为你想要的颜色 */
}
</style>

<template>
  <el-tree ... v-bind:class="{ custom-node-color: selectedNodeColor.includes('is-selected') }"></el-tree>
</template>

在上述代码中，当你选择一个节点，`selectedNodeColor`会包含`is-selected`类名，这将应用你自定义的`.custom-node-color`样式。