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 的代码 进行 改造

后面 有空写

posted @ 2022-03-16 11:31  ifnk  阅读(208)  评论(0编辑  收藏  举报