el-tree修改选中的颜色

在Element UI的`el-tree`组件中，如果你想改变选中节点的颜色，你可以通过自定义渲染或者在选择事件回调中动态操作节点的样式来实现。这里提供一种简单的例子：

1. **通过自定义渲染**:
在`el-tree`的`default-checked-keys`属性设置好默认选中状态后，在`node-key`对应的render函数里添加颜色处理。例如：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    default-checked-keys={['1']}
    @check-change="handleCheckChange"
    :highlight-current="true" <!-- 显示选中边框 -->
    ref="treeRef"
  ></el-tree>
</template>

<script>
export default {
  methods: {
    handleCheckChange(node) {
      if (node.checked) {
        this.$refs.treeRef.current.nodes.find(n => n.id === node.key).style.backgroundColor = 'yourDesiredColor'; // 更改背景色
      }
    },
  },
};
</script>

在这里，你需要将`yourDesiredColor`替换为你希望选中节点显示的实际颜色。

2. **在选择事件回调中**:
监听`node-click`事件，然后处理选中节点的颜色改变。示例：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    default-checked-keys={['1']}
    @node-click="handleNodeClick"
    highlight-current
  ></el-tree>
</template>

<script>
export default {
  methods: {
    handleNodeClick(node) {
      const selectedNode = this.$refs.treeRef.current.getCheckedNodes()[0];
      if (selectedNode) {
        selectedNode.style.backgroundColor = 'yourDesiredColor';
      }
    },
  },
};
</script>

别忘了替换`yourDesiredColor`为你想要的颜色值。同时，这两种方法都需要你自己管理节点的颜色状态，如果需要动态地切换选中节点的颜色，记得在相应的逻辑中清除之前设置的背景色。