el-tree-v2高亮自定义

`el-tree-v2`是Element Plus库中的一个组件，它是一个基于虚拟滚动的树形控件，常用于数据结构的层次展示。高亮自定义功能允许你在树节点上进行特定状态下的样式定制，以便于用户快速识别关键信息或当前选中的节点。

在`el-tree-v2`中，你可以通过以下方式来自定义高亮：

1. **事件监听**：当节点被点击或处于其他高亮状态时（比如鼠标悬停），可以通过`@node-click`、`@node-contextmenu`等事件监听器来获取节点，然后对它们的样式进行修改。

<template>
  <el-tree
    :data="treeData"
    @node-click="handleNodeClick"
    ref="tree"
  ></el-tree>
</template>

<script>
export default {
  methods: {
    handleNodeClick(node) {
      this.$refs.tree.setCurrentKey(node.key); // 设置当前选中的节点
      // 根据需要自定义样式，如使用v-bind:class 或者直接操作node.style
      node.class = 'custom-highlight'; // 假设你有一个名为'custom-highlight'的CSS类
    },
  },
};
</script>

2. **节点属性**：在数据节点对象中，你可以添加额外的属性来标记状态，例如`highlight`属性，然后在渲染节点时根据这个属性决定是否应用高亮样式。

data() {
  return {
    treeData: [
      { key: '1', label: '父节点', highlight: false, children: ... },
      { key: '2', label: '子节点', highlight: true, ... },
    ],
  };
},

3. **CSS自定义**：创建一个CSS类来描述你想要的高亮样式，如背景色、边框变化等，然后在上述方法中应用这个类。

.custom-highlight {
  background-color: yellow; /* 示例中的黄色背景 */
  border: 1px solid red; /* 示例中的红色边框 */
}