ts 展平的数组 拼装成树 配合 ant design table
js 展平数组 拼装成树有很多中 ,百度 找了 其中 一种
const createDataTree = dataset => {
const hashTable = Object.create(null);
dataset.forEach(aData => hashTable[aData.ID] = {...aData, childNodes: []});
const dataTree = [];
dataset.forEach(aData => {
if(aData.parentID) hashTable[aData.parentID].childNodes.push(hashTable[aData.ID])
else dataTree.push(hashTable[aData.ID])
});
return dataTree;
};
大概意思就是 先把展平 的数组 往 字典里面 塞 ,然后 根据 是否是根节点 来对字典 的值进行修改 ,
是根节点的就加进 结果数组里面
不是根节点 就 把他放到对应 字典 item 的 children 里面 去 ,用了 对象 引用的特性
但是这种配合 ant design table 有个坏处 就是 ant design 如果 你 有children 这个属性 并且 children =[] 空的时候
展开节点的图标 还是会显示的 ,官方说 是 为了 触发 异步加载
所以想要 children=[]
不触发 ,就得把 children 设置为 undefined
而且我们用的 是 ts 不是 js ,所以要对这个 js 的代码 进行 改造
后面 有空写