element 树组件怎么在点击树之外的地方，不让原来树被点击节点失去焦点并保留点击后的颜色

可以通过监听 document 的 click 事件，判断点击的区域是否在树组件内部，如果不在则取消选中节点的焦点并保留点击后的颜色。具体实现可以参考以下代码：

mounted() {
  // 监听 document 的 click 事件
  document.addEventListener('click', this.handleDocumentClick)
},
methods: {
  handleDocumentClick(event) {
    const treeContainer = this.$refs.tree.$el // 获取树组件的容器元素
    if (!treeContainer.contains(event.target)) { // 判断点击的区域是否在树组件内部
      this.$refs.tree.setCurrentKey(null) // 取消选中节点的焦点
    }
  }
}

其中，`$refs.tree` 获取到的是树组件的实例，`setCurrentKey(null)` 取消选中节点的焦点。通过这段代码，就可以实现点击树之外的地方，不让原来树被点击节点失去焦点并保留点击后的颜色。

相关问题

Vue3+Vite+TypeScript基于Element plus 二次封装可编辑树组件，组件命名TreeEdit,点击编辑节点名称变成输入框，可以修改，失去焦点后触发编辑节点事件，父组件调后台数据更新接口。新增节点功能是点击新增按钮，弹框选择是新增同级还是子级节点，填写节点名称，弹框点击确定后触发新增节点事件。组件参数：showEdit: 是否可编辑true/false. 默认false；showCheckbox: 树节点是否可选择；treeData: 树型结构数据，节点数据支持配置showEdit控制节点级的是否可编辑；treeExpandAll: 是否全部展开(控制树的展开和收起)；treeNodeKey: 树节点唯一标识属性；组件事件：handleNodeClick: 树节点点击事件，参数：点击节点数据；selectChange: 树复选框选中变化；addItem: 新增节点事件；editItem: 编辑节点事件；deleteItem: 删除节点事件。最后怎么使用，示例代码中多点注释，用vue3的语法setup

好的，你的问题是如何使用Vue3+Vite+TypeScript基于Element plus 二次封装可编辑树组件TreeEdit？以下是示例代码：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    :default-expand-all="treeExpandAll"
    @node-click="handleNodeClick"
    @check-change="selectChange"
    node-key="treeNodeKey"
  >
    <template #default="{ node, data }">
      <div v-if="node.showEdit">
        <el-input
          v-model="data.label"
          size="mini"
          @blur="editItem(data)"
        ></el-input>
      </div>
      <div v-else>
        <span>{{ data.label }}</span>
      </div>
    </template>
  </el-tree>
  <el-button type="primary" @click="addItem">新增节点</el-button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElTree } from 'element-plus';

interface TreeNode {
  id: number;
  label: string;
  children?: TreeNode[];
  showEdit?: boolean;
}

export default defineComponent({
  name: 'TreeEdit',
  components: { ElTree },
  props: {
    showEdit: {
      type: Boolean,
      default: false,
    },
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array as () => TreeNode[],
      required: true,
    },
    treeExpandAll: {
      type: Boolean,
      default: false,
    },
    treeNodeKey: {
      type: String,
      default: 'id',
    },
  },
  setup(props, { emit }) {
    const treeProps = {
      checkStrictly: true,
      showCheckbox: props.showCheckbox,
      draggable: true,
    };

    const handleNodeClick = (data: TreeNode) => {
      emit('handleNodeClick', data);
    };

    const selectChange = (data: TreeNode, checked: boolean) => {
      emit('selectChange', data, checked);
    };

    const addItem = () => {
      emit('addItem');
    };

    const editItem = (data: TreeNode) => {
      data.showEdit = false;
      emit('editItem', data);
    };

    const deleteItem = (data: TreeNode) => {
      emit('deleteItem', data);
    };

    return {
      treeProps,
      handleNodeClick,
      selectChange,
      addItem,
      editItem,
      deleteItem,
    };
  },
});
</script>

使用示例：

<template>
  <TreeEdit
    :showEdit="true"
    :showCheckbox="true"
    :treeData="treeData"
    :treeExpandAll="true"
    @handleNodeClick="handleNodeClick"
    @selectChange="selectChange"
    @addItem="addItem"
    @editItem="editItem"
    @deleteItem="deleteItem"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import TreeEdit from './components/TreeEdit.vue';

interface TreeNode {
  id: number;
  label: string;
  children?: TreeNode[];
  showEdit?: boolean;
}

export default defineComponent({
  components: { TreeEdit },
  setup() {
    const treeData = ref<TreeNode[]>([
      {
        id: 1,
        label: '一级节点1',
        children: [
          {
            id: 11,
            label: '二级节点1',
          },
          {
            id: 12,
            label: '二级节点2',
          },
        ],
      },
      {
        id: 2,
        label: '一级节点2',
        children: [
          {
            id: 21,
            label: '二级节点3',
            children: [
              {
                id: 211,
                label: '三级节点1',
              },
            ],
          },
          {
            id: 22,
            label: '二级节点4',
          },
        ],
      },
    ]);

    const handleNodeClick = (data: TreeNode) => {
      console.log(data);
    };

    const selectChange = (data: TreeNode, checked: boolean) => {
      console.log(data, checked);
    };

    const addItem = () => {
      console.log('新增节点');
    };

    const editItem = (data: TreeNode) => {
      console.log('编辑节点', data);
    };

    const deleteItem = (data: TreeNode) => {
      console.log('删除节点', data);
    };

    return {
      treeData,
      handleNodeClick,
      selectChange,
      addItem,
      editItem,
      deleteItem,
    };
  },
});
</script>

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