标签：code child span hide 插入 lse view open 无限
所用测试数据：
1 const data = [ 2 { 3 "area_id": 5, 4 "name": "广东省", 5 "parent_id": 0, 6 }, 7 { 8 "area_id": 6, 9 "name": "广州市", 10 "parent_id": 5, 11 }, 12 { 13 "area_id": 7, 14 "name": "深圳市", 15 "parent_id": 5, 16 }, 17 { 18 "area_id": 9, 19 "name": "昌平区", 20 "parent_id": 4, 21 }, 22 { 23 "area_id": 4, 24 "name": "北京市", 25 "parent_id": 3, 26 }, 27 { 28 "area_id": 3, 29 "name": "北京", 30 "parent_id": 0, 31 }, 32 { 33 "area_id": 2, 34 "name": "测试子地区", 35 "parent_id": 1, 36 }, 37 { 38 "area_id": 1, 39 "name": "测试地区", 40 "parent_id": 0, 41 } 42 ]
递归实现无限级数据：
1 function toTreeData(data,pid){ 2 function tree(id) { 3 let arr = [] 4 data.filter(item => { 5 return item.parent_id === id; 6 }).forEach(item => { 7 arr.push({ 8 area_id: item.area_id, 9 label: item.name, 10 children: tree(item.area_id) 11 }) 12 }) 13 return arr.length>0?arr:"" 14 } 15 return tree(pid) // 第一级节点的父id，是null或者0，视情况传入 16 } 17 var tmp=toTreeData(data,0); 18 console.log(tmp);
1 function setTreeData(arr) { 2 // 删除所有 children,以防止多次调用 3 arr.forEach(function (item) { 4 delete item.children; 5 }); 6 let map = {}; // 构建map 7 arr.forEach(i => { 8 map[i.area_id] = i; // 构建以area_id为键 当前数据为值 9 }); 10 11 let treeData = []; 12 arr.forEach(child => { 13 const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中 14 15 if (mapItem) { // 存在则表示当前数据不是最顶层数据 16 17 // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点 18 (mapItem.children || ( mapItem.children = [] )).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据 19 } else { // 不存在则是组顶层数据 20 treeData.push(child); 21 } 22 }); 23 24 return treeData; 25 };
总结：递归其实遇到数据格式类似且嵌套的时候会使用到
标签：code child span hide 插入 lse view open 无限
原文地址：https://www.cnblogs.com/song-zmin/p/12808786.html
