el-tree组件三级，第一次选中三级节点的右边添加tag标记，同级第一下复选框点击都添加 显示树结构数据

el-tree 是 Element UI 中的一个组件，用于展示树状的数据结构。如果你想要实现在用户初次选择三级节点时，在该节点右侧添加一个标签标记，并且当同一层级的第一个复选框被选中时，所有同级别的节点都会被添加这个标记，你可以按照以下步骤操作：

1. **数据准备**：首先，确保你的树形数据结构中包含必要的属性，比如 `id`、`text`、`level` 和 `isTagged`（表示是否已经有标签），以及 `children` 属性。

2. **模板设置**：在 Vue 组件中，使用 `el-tree` 的模板，监听 `node-click` 或者 `check-change` 事件。例如：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    ref="treeRef"
    @node-click="handleNodeClick"
    @check-change="handleCheckChange"
  ></el-tree>

  <!-- 右侧的标签区域，假设有个 ref="tagArea" -->
  <div v-if="selectedNode && selectedNode.level === 3" ref="tagArea">
    <span>已添加标签</span>
    <!-- 标签按钮或删除操作 -->
  </div>
</template>

3. **处理函数**：
- `handleNodeClick(node)`：在这个方法里，检查节点级别和首次选择，如果符合条件就添加标记。
- `handleCheckChange(node, checked, indeterminate)`：检查当前选中项的状态，如果是第一项，则更新其他同级节点的 `isTagged` 属性。

export default {
  data() {
    return {
      treeData,
      selectedNode: null,
    };
  },
  methods: {
    handleNodeClick(node) {
      if (node.level === 3 && !node.isTagged) {
        // 添加标记并可能触发更新状态
        node.isTagged = true;
        this.selectedNode = node; // 保存当前选择的节点
      }
    },
    handleCheckChange(node, checked, indeterminate) {
      if (!indeterminate && node.parent && node.parent.children[0] === node) { // 检查是否是同级第一个被选中的
        node.parent.children.forEach((child) => {
          child.isTagged = checked; // 更新同级所有节点
        });
      }
    },
  },
};