一、树形数据初始化与预处理

在构建树形选择组件前，需确保源数据符合嵌套结构规范。典型树形数据应包含唯一标识符（id）、节点名称（label）及子节点数组（children），示例结构如下：

const rawTreeData = [
  {
    id: 1001,
    label: '系统管理',
    children: [
      { id: 1002, label: '用户管理' },
      { 
        id: 1003, 
        label: '权限配置',
        children: [
          { id: 1004, label: '角色定义' },
          { id: 1005, label: '权限组' }
        ]
      }
    ]
  },
  {
    id: 2001,
    label: '数据分析',
    children: [
      { id: 2002, label: '报表中心' }
    ]
  }
];

实际开发中需注意：

唯一标识：每个节点id必须全局唯一，推荐使用UUID或数据库自增ID
层级深度：建议树深度不超过5层，避免影响用户体验
数据量控制：单层节点数超过200时，应考虑虚拟滚动或分页加载

二、el-tree组件深度配置

基础组件配置

在Vue模板中配置el-tree时，需重点关注以下属性：

<el-tree
  ref="treeInstance"
  :data="processedTreeData"
  show-checkbox
  node-key="id"
  :props="treeProps"
  @check-change="handleNodeCheck"
  @check="handleBatchCheck"
></el-tree>

关键配置项说明：

show-checkbox：启用复选框选择功能
node-key：指定节点唯一标识字段（必须与数据结构中的id字段对应）
props：自定义节点属性映射（适用于非标准数据结构）

高级功能配置

通过props配置可适配不同数据结构：

data() {
  return {
    treeProps: {
      children: 'subItems',  // 子节点字段名
      label: 'displayName', // 节点显示文本字段
      disabled: 'isLocked'  // 禁用状态字段
    }
  }
}

三、选中数据获取与处理

实时选中状态监听

通过@check-change事件可捕获单个节点的选中状态变化：

methods: {
  handleNodeCheck(node, checked) {
    if (checked) {
      console.log('选中节点:', node);
      // 可在此处执行即时业务逻辑
    }
  }
}

批量选中数据获取

更常见的场景是通过getCheckedNodes方法获取所有选中节点：

methods: {
  getSelectNodes() {
    const checkedNodes = this.$refs.treeInstance.getCheckedNodes();
    // 过滤掉无效节点（如半选状态的父节点）
    const validNodes = checkedNodes.filter(node => node.checked);
    return this.rebuildTreeStructure(validNodes);
  }
}

四、树形结构重组算法

基础重组实现

最简单的重组方式是提取选中节点的核心字段：

rebuildSimpleTree(nodes) {
  return nodes.map(node => ({
    id: node.id,
    title: node.label,  // 兼容不同命名规范
    // 可根据需要添加其他字段
    meta: {
      createTime: node.createTime
    }
  }));
}

完整树结构重建

当需要保持父子关系时，需实现更复杂的重建逻辑：

rebuildCompleteTree(rawNodes) {
  // 1. 建立id到节点的映射
  const nodeMap = new Map();
  rawNodes.forEach(node => {
    nodeMap.set(node.id, { ...node, children: [] });
  });
  // 2. 构建父子关系
  const result = [];
  nodeMap.forEach(node => {
    if (node.parentId) {
      const parent = nodeMap.get(node.parentId);
      if (parent) parent.children.push(node);
    } else {
      result.push(node);
    }
  });
  // 3. 过滤掉未选中的节点（根据业务需求调整）
  return this.filterUncheckedNodes(result);
}

性能优化版本

对于大数据量场景，可采用以下优化策略：

optimizedRebuild(nodes) {
  // 使用对象存储替代Map提升性能
  const nodeDict = {};
  const roots = [];
  // 单次遍历构建字典和根节点数组
  nodes.forEach(node => {
    nodeDict[node.id] = { ...node, children: [] };
    if (!node.parentId) {
      roots.push(nodeDict[node.id]);
    }
  });
  // 二次遍历建立父子关系
  nodes.forEach(node => {
    if (node.parentId) {
      const parent = nodeDict[node.parentId];
      if (parent) parent.children.push(nodeDict[node.id]);
    }
  });
  return roots;
}

五、实际应用场景扩展

动态权限树构建

在权限管理系统中，可通过重组选中节点生成用户权限树：

generatePermissionTree(selectedNodes) {
  // 按系统模块分组
  const modules = {};
  selectedNodes.forEach(node => {
    if (!modules[node.moduleId]) {
      modules[node.moduleId] = {
        id: node.moduleId,
        label: node.moduleName,
        children: []
      };
    }
    modules[node.moduleId].children.push({
      id: node.id,
      label: node.permissionName,
      action: node.actionType
    });
  });
  return Object.values(modules);
}

多选树的数据过滤

当需要排除特定类型节点时，可添加过滤逻辑：

filterTreeNodes(nodes, excludeTypes) {
  return nodes.filter(node => {
    if (excludeTypes.includes(node.type)) return false;
    if (node.children) {
      node.children = this.filterTreeNodes(node.children, excludeTypes);
    }
    return true;
  });
}

六、最佳实践建议

数据预处理：在初始化el-tree前，对原始数据进行扁平化处理，便于后续操作
防抖处理：对频繁触发的check事件添加防抖，避免性能问题
内存优化：大数据量时使用WeakMap替代普通对象存储节点引用
可视化反馈：重组过程中显示加载状态，提升用户体验
错误处理：添加对循环引用的检测逻辑，防止无限递归

通过以上技术方案，开发者可以高效实现el-tree选中数据的重组与优化，满足各类复杂业务场景的需求。实际开发中应根据具体需求调整算法复杂度，在功能完整性与性能表现间取得平衡。

基于el-tree的选中数据重组与树形结构优化方案