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

在Element Plus UI组件库中，Tree组件的样式通常通过CSS来定制，包括选中节点的颜色。要在Vue 3项目中设置选中节点的颜色，你需要在`<el-tree>`元素的根级添加一个自定义的CSS类，并覆盖默认样式。例如：

<template>
  <el-tree
    :data="treeData"
    ref="treeRef"
    class="custom-tree"
    :default-expand-all="true"
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<style scoped>
.custom-tree .el-tree-node.is-active {
  background-color: #e9f7ff; /* 设置选中节点的颜色 */
}
</style>

<script setup>
import { ref } from 'vue';
import { ElTree } from 'element-plus';

const treeData = ...; // 你的数据结构
const treeRef = ref(null);

function handleNodeClick(node) {
  if (node.data.isSpecial) {
    node.$element.classList.add('selected'); // 当需要动态改变颜色时，可以这么操作
  }
}

// 使用时
</script>

在这个例子中，`.is-active`是Element Plus Tree组件内置的用于表示选中状态的类名。你可以根据需要修改`.selected`类的背景色。如果你想基于某些条件动态更改节点的选中颜色，可以在`handleNodeClick`函数中添加相应的逻辑。