el-tree选中后改变字体颜色，清空后变为原来的颜色

在Element UI的`el-tree`组件中，如果你想在选中节点后改变其字体颜色，可以利用`active-node-key`属性和`@node-click`事件来追踪选中的节点，并修改其颜色。当节点被清空（即`active-node-key`变化），则恢复到原来的颜色。

首先，定义一个状态变量来保存当前选中的节点ID和它的初始颜色：

<template>
  <el-tree
    ref="treeRef"
    :data="treeData"
    :active-node-key="selectedNodeId"
    @node-click="handleNodeClick"
  >
    <!-- ... -->
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData,
      selectedNodeId: '', // 初始选中节点ID
      initialFontColor: '', // 节点的初始颜色（如果有的话）
    };
  },
  //...
</script>

然后，在`handleNodeClick`方法中，改变选中节点的字体颜色：

methods: {
  handleNodeClick(node, event) {
    this.selectedNodeId = node.key;
    if (node.fontColor) { // 如果有预设的fontColor属性
      this.initialFontColor = node.fontColor; // 保存原始颜色
      node.fontColor = 'new-color'; // 更改颜色
    } else {
      node.style.color = 'new-color'; // 动态设置新的颜色
    }
  },
},
// 当失去焦点或清空时，恢复颜色
watch: {
  selectedNodeId(newVal, oldVal) {
    if (!newVal || newVal === oldVal) {
      if (this.initialFontColor) {
        this.$nextTick(() => {
          this.$refs.treeRef.getNodeByKey(this.selectedNodeId).style.color = this.initialFontColor;
        });
      } else {
        // 如果没有初始颜色，保持默认或者清除样式
        console.log('Restoring default or removing color from selected node');
      }
    }
  },
},

请注意，这里假设`node`对象有一个名为`fontColor`的属性或者可以直接改变其`style.color`属性。如果没有这样的属性，你需要查找其他途径获取字体颜色信息或使用节点的CSS类名来动态改变。