关于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');
},