vue 中的 el-tree 组件选中持续高亮并且修改高亮颜色

在 Vue 的 Element UI（简称 El-Tree）组件中，如果想要实现在节点被选中时持续高亮，并且自定义高亮的颜色，你可以通过监听 `@select` 事件来控制选中状态，并使用 CSS 或者组件提供的样式属性来改变选中的样式。

首先，确保你已经安装了 Element UI 并引入了相关的样式：

<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

然后，在组件中添加 `@select` 事件处理器：

<template>
  <el-tree
    :data="treeData"
    ref="tree"
    @select="handleNodeSelect"
    :props="treeProps"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 树数据
      treeProps: { children: 'children', label: 'name' }, // 展示属性
      selectedNodes: [] // 用于存储当前选中的节点
    };
  },
  methods: {
    handleNodeSelect(node) {
      // 当节点被选择时，更新选中节点数组并更改选中样式的颜色
      this.selectedNodes.push(node);
      this.$refs.tree.setCheckedKeys([node.key], true); // 设置节点选中状态
      this.updateNodeHighlight(node); // 自定义高亮方法
    },
    
    updateNodeHighlight(node) {
      node.highlighted = true; // 使用组件提供的 `highlighted` 属性
      const color = this.isCustomColor ? 'custom-color-you-want' : 'primary'; // 如果有自定义颜色函数，则应用该颜色，否则使用默认颜色
      node.style.color = color;
    }
  }
};
</script>

在这里，你需要创建一个名为 `highlighted` 的属性来表示节点是否被高亮，同时定义一个 `updateNodeHighlight` 方法来设置这个属性以及颜色。如果你想自定义颜色，可以添加一个布尔变量 `isCustomColor` 和对应的颜色值。

最后，记得在 CSS 中为 `highlighted` 高亮状态定义样式：

.el-tree-node--selected .highlighted {
  color: custom-color-you-want !important; /* 自定义颜色 */
}