基于el-tree实现选中数据重组为树形结构的完整方案

2026年1月20日 互联网

基于el-tree实现选中数据重组为树形结构的完整方案

在复杂业务系统中，树形结构数据的选择与重组是常见需求。本文将以el-tree组件为例，详细介绍如何实现选中数据重组为树形结构的技术方案，涵盖数据初始化、组件配置、选中节点获取及树形重组等完整流程。

一、数据结构初始化

树形数据结构需要满足特定格式要求，通常包含节点标识、显示文本和子节点数组三个核心字段。以下是标准树形数据示例：

  1. const treeData = [
  2.   {
  3.     id: 1,
  4.     label: '根节点1',
  5.     children: [
  6.       { id: 2, label: '子节点1-1' },
  7.       { 
  8.         id: 3, 
  9.         label: '子节点1-2',
  10.         children: [
  11.           { id: 4, label: '孙节点1-2-1' }
  12.         ]
  13.       }
  14.     ]
  15.   },
  16.   {
  17.     id: 5,
  18.     label: '根节点2',
  19.     children: [
  20.       { id: 6, label: '子节点2-1' }
  21.     ]
  22.   }
  23. ];

数据结构要求：

  1. 每个节点必须包含唯一标识字段（如id）
  2. 父节点通过children数组包含子节点
  3. 节点文本通过label字段显示
  4. 层级深度不限制，但建议不超过5级

二、el-tree组件配置

在Vue组件中配置el-tree需要设置多个关键属性：

  1. <template>
  2.   <el-tree
  3.     :data="treeData"
  4.     show-checkbox
  5.     node-key="id"
  6.     ref="treeRef"
  7.     @check-change="handleCheckChange"
  8.     :props="treeProps"
  9.   ></el-tree>
  10. </template>
  12. <script>
  13. export default {
  14.   data() {
  15.     return {
  16.       treeData: [], // 初始化空数据
  17.       treeProps: {
  18.         children: 'children',
  19.         label: 'label'
  20.       }
  21.     };
  22.   },
  23.   mounted() {
  24.     this.initTreeData(); // 组件挂载后初始化数据
  25.   },
  26.   methods: {
  27.     initTreeData() {
  28.       // 这里可以添加异步数据加载逻辑
  29.       this.treeData = treeData; // 加载准备好的树形数据
  30.     },
  31.     handleCheckChange(data, checked) {
  32.       // 选中状态变化处理
  33.     }
  34.   }
  35. };
  36. </script>

关键配置说明：

  1. show-checkbox：启用复选框功能
  2. node-key：指定节点唯一标识字段
  3. ref：设置组件引用，便于后续操作
  4. props：配置子节点字段名和显示文本字段名
  5. @check-change：绑定选中状态变化事件

三、选中节点获取与处理

通过组件引用可以获取完整的选中节点信息：

1. 获取选中节点

  1. methods: {
  2.   getSelectedNodes() {
  3.     const tree = this.$refs.treeRef;
  4.     // 获取所有选中节点（包含半选状态）
  5.     const checkedNodes = tree.getCheckedNodes();
  6.     // 获取严格选中节点（不包含半选状态）
  7.     const strictlyCheckedNodes = tree.getCheckedNodes(true);
  9.     return {
  10.       allSelected: checkedNodes,
  11.       strictSelected: strictlyCheckedNodes
  12.     };
  13.   }
  14. }

2. 节点数据处理

获取的原始节点数据包含完整结构，通常需要根据业务需求进行过滤和转换：

  1. processSelectedNodes(nodes) {
  2.   return nodes.map(node => ({
  3.     id: node.id,
  4.     label: node.label,
  5.     // 可以添加业务需要的额外字段
  6.     customField: node.someProperty || 'default'
  7.   })).filter(node => node.id !== undefined);
  8. }

四、选中数据重组为树形结构

重组选中数据为树形结构是核心需求，需要处理父子节点关系：

1. 基础重组方法

  1. buildSelectedTree(nodes) {
  2.   // 创建id到节点的映射
  3.   const nodeMap = {};
  4.   nodes.forEach(node => {
  5.     nodeMap[node.id] = { ...node, children: [] };
  6.   });
  8.   // 构建树形结构
  9.   const tree = [];
  10.   nodes.forEach(node => {
  11.     if (node.parentId) { // 假设原始数据有parentId字段
  12.       if (nodeMap[node.parentId]) {
  13.         nodeMap[node.parentId].children.push(nodeMap[node.id]);
  14.       }
  15.     } else {
  16.       tree.push(nodeMap[node.id]);
  17.     }
  18.   });
  20.   return tree;
  21. }

2. 优化后的重组方案

更完善的实现需要考虑：

  1. 原始数据可能没有parentId字段
  2. 需要处理选中节点的完整路径
  3. 保持原始树形结构的层级关系
  1. buildOptimizedSelectedTree(nodes, originalTree) {
  2.   // 创建原始节点的完整路径映射
  3.   const pathMap = {};
  4.   const buildPaths = (tree, path = []) => {
  5.     tree.forEach(node => {
  6.       const currentPath = [...path, node.id];
  7.       pathMap[node.id] = currentPath;
  8.       if (node.children) {
  9.         buildPaths(node.children, currentPath);
  10.       }
  11.     });
  12.   };
  13.   buildPaths(originalTree);
  15.   // 构建选中节点的树形结构
  16.   const selectedMap = {};
  17.   nodes.forEach(node => {
  18.     selectedMap[node.id] = { ...node, children: [] };
  19.   });
  21.   const result = [];
  22.   nodes.forEach(node => {
  23.     const path = pathMap[node.id];
  24.     if (path.length > 1) {
  25.       // 找到父节点
  26.       const parentId = path[path.length - 2];
  27.       if (selectedMap[parentId] && nodes.some(n => n.id === parentId)) {
  28.         selectedMap[parentId].children.push(selectedMap[node.id]);
  29.       } else {
  30.         result.push(selectedMap[node.id]);
  31.       }
  32.     } else {
  33.       result.push(selectedMap[node.id]);
  34.     }
  35.   });
  37.   return result;
  38. }

五、完整实现示例

综合以上内容，完整的实现方案如下：

  1. <template>
  2.   <div>
  3.     <el-tree
  4.       :data="treeData"
  5.       show-checkbox
  6.       node-key="id"
  7.       ref="treeRef"
  8.       @check-change="handleCheckChange"
  9.       :props="treeProps"
  10.     ></el-tree>
  11.     <div class="result-area">
  12.       <h3>重组后的树结构：</h3>
  13.       <pre>{{ formattedSelectedTree }}</pre>
  14.     </div>
  15.   </div>
  16. </template>
  18. <script>
  19. export default {
  20.   data() {
  21.     return {
  22.       treeData: [],
  23.       selectedTree: [],
  24.       treeProps: {
  25.         children: 'children',
  26.         label: 'label'
  27.       }
  28.     };
  29.   },
  30.   computed: {
  31.     formattedSelectedTree() {
  32.       return JSON.stringify(this.selectedTree, null, 2);
  33.     }
  34.   },
  35.   mounted() {
  36.     this.initTreeData();
  37.   },
  38.   methods: {
  39.     initTreeData() {
  40.       // 模拟异步加载数据
  41.       setTimeout(() => {
  42.         this.treeData = [
  43.           {
  44.             id: 1,
  45.             label: '根节点1',
  46.             children: [
  47.               { id: 2, label: '子节点1-1' },
  48.               { 
  49.                 id: 3, 
  50.                 label: '子节点1-2',
  51.                 children: [
  52.                   { id: 4, label: '孙节点1-2-1' }
  53.                 ]
  54.               }
  55.             ]
  56.           },
  57.           {
  58.             id: 5,
  59.             label: '根节点2',
  60.             children: [
  61.               { id: 6, label: '子节点2-1' }
  62.             ]
  63.           }
  64.         ];
  65.       }, 300);
  66.     },
  67.     handleCheckChange() {
  68.       this.rebuildSelectedTree();
  69.     },
  70.     rebuildSelectedTree() {
  71.       const checkedNodes = this.$refs.treeRef.getCheckedNodes();
  72.       if (checkedNodes.length === 0) {
  73.         this.selectedTree = [];
  74.         return;
  75.       }
  77.       // 创建原始节点的路径映射
  78.       const pathMap = {};
  79.       const buildPaths = (tree, path = []) => {
  80.         tree.forEach(node => {
  81.           const currentPath = [...path, node.id];
  82.           pathMap[node.id] = currentPath;
  83.           if (node.children) {
  84.             buildPaths(node.children, currentPath);
  85.           }
  86.         });
  87.       };
  88.       buildPaths(this.treeData);
  90.       // 构建选中节点的映射
  91.       const selectedMap = {};
  92.       checkedNodes.forEach(node => {
  93.         selectedMap[node.id] = { ...node, children: [] };
  94.       });
  96.       // 构建树形结构
  97.       const result = [];
  98.       checkedNodes.forEach(node => {
  99.         const path = pathMap[node.id];
  100.         if (path.length > 1) {
  101.           const parentId = path[path.length - 2];
  102.           if (selectedMap[parentId]) {
  103.             selectedMap[parentId].children.push(selectedMap[node.id]);
  104.           } else {
  105.             result.push(selectedMap[node.id]);
  106.           }
  107.         } else {
  108.           result.push(selectedMap[node.id]);
  109.         }
  110.       });
  112.       this.selectedTree = result;
  113.     }
  114.   }
  115. };
  116. </script>
  118. <style>
  119. .result-area {
  120.   margin-top: 20px;
  121.   padding: 10px;
  122.   border: 1px solid #eee;
  123.   max-height: 300px;
  124.   overflow-y: auto;
  125. }
  126. </style>

六、性能优化建议

  1. 大数据量处理：当树节点超过1000个时，建议使用虚拟滚动技术
  2. 防抖处理：对check-change事件添加防抖，避免频繁重组
  3. 记忆化缓存：对重组结果进行缓存，相同选中状态不重复计算
  4. Web Worker：将重组计算放在Web Worker中执行，避免阻塞UI

七、常见问题解决方案

  1. 选中状态不同步：确保node-key设置为唯一标识字段
  2. 重组后树结构错乱：检查原始数据是否包含循环引用
  3. 性能卡顿：对大数据量使用分页加载或懒加载
  4. 样式异常：检查是否正确引入了element-ui的样式文件

通过以上完整方案，开发者可以轻松实现el-tree选中数据的树形重组功能，满足复杂业务场景下的数据展示和处理需求。

最新文章