element ui tree 选中高亮

Element UI Tree组件可以通过设置highlight-current属性来实现选中节点高亮的效果。当该属性设置为true时，当前选中的节点会被高亮显示。同时，可以通过设置default-expand-all属性来展开所有节点，方便用户查看。另外，还可以通过设置node-key属性来指定节点的唯一标识符，以便在选中节点时进行操作。

相关问题

关于element-ui el-tree 无复选框（CheckBox）时获取当前选中id，及手动选中高亮

Element UI 的 `el-tree` 组件默认是没有内置的复选框功能的，如果你想在不使用复选框的情况下获取当前选中的节点ID，可以采用自定义节点的数据结构和事件监听的方式来实现。

1. **数据结构**：在每个节点的选项（data）里添加一个字段，比如 `selectedIds`，用于存储当前节点被选中的状态。当节点被点击时，更新该字段。

{
  label: '节点名称',
  children: [
    {
      label: '子节点1',
      selectedIds: []
    },
    //...
  ],
  selectedIds: []
}

2. **事件处理**：在 `el-tree` 上绑定 `@node-click` 事件，这个事件会在用户点击节点时触发。在事件处理器中，你可以判断当前被点击的节点是否是根节点，并据此更新其子节点或自身的 `selectedIds`。

<el-tree ref="tree" node-key="id" @node-click="handleNodeClick"></el-tree>

methods: {
  handleNodeClick(node) {
    if (node.parent) {
      node.parent.selectedIds = this.flattenTree(node).map(n => n.id);
    } else {
      this.$refs.tree.setCheckedKeys([node.id]);
    }
  },
  
  flattenTree(node) { // 辅助函数，将树形结构扁平化成包含所有子节点的数组
    return [...node.children, ...node.children.flatMap(this.flattenTree)];
  }
}

3. **手动选中高亮**：当你需要手动设置某节点为选中时，可以通过 `setCheckedKeys` 或者遍历树结构并改变节点的 `selected` 属性来实现。选中的节点会被渲染为高亮样式。

注意，在实际应用中，你需要根据项目需求定制具体的业务逻辑，并确保 `selectedIds` 的管理和同步是正确的。

关于element-ui el-tree 无复选框（CheckBox）时监听获取当前选中id，及手动选中高亮，失去焦点后清空选中节点对象

Element UI 的 `el-tree` 是一个基于 Vue.js 实现的树形组件，当你需要处理单选或多选功能但不需要复选框时，可以利用它的 `node-key` 属性来唯一标识每个节点，并结合 `@node-click` 和 `@selection-change` 事件来跟踪节点选择。

1. **监听当前选中 id**:
使用 `@node-click` 事件，在用户点击节点时，你可以获取到点击的节点信息，包括其 ID。例如：

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

<script>
export default {
  data() {
    return {
      treeData: ...,
      selectedIds: [], // 存储选中的节点 ID
      nodeKey: 'id', // 标识节点的字段名
    };
  },
  methods: {
    handleNodeClick(node) {
      if (this.selectedIds.includes(node.id)) {
        this.selectedIds.splice(this.selectedIds.indexOf(node.id), 1);
      } else {
        this.selectedIds.push(node.id);
      }
    },
  },
};
</script>

在这个例子中，`selectedIds` 数组会保存选中的节点 ID。

2. **手动选中高亮**:
可以在数据模型中添加一个表示是否已选中的属性，如 `checked` 或 `selected`。通过这个属性控制节点的样式（比如颜色变化）。

3. **失去焦点后清空选中**:
当树组件失去焦点，你可以使用一个自定义的 `beforeDestroy` 生命周期钩子来清除选中状态。例如：

mounted() {
  this.$refs.tree.on('blur', () => {
    this.selectedIds = [];
  });
},
beforeDestroy() {
  // 当组件销毁时，移除事件监听
  this.$refs.tree.off('blur');
},