给 Antd Table 组件编写缩进指引线、子节点懒加载等功能

只需要在自定义渲染单元格元素的时候，得到以下两个信息。

1. 当前节点的层级信息。
2. 当前节点的父节点是否是展开状态。

所以思路就是对数据进行一次递归处理，把层级写在节点上，并且要把父节点的引用也写上，之后再通过传给 Table 的 expandedRowKeys 属性来维护表格的展开行数据。

这里我是直接改写了原始数据，如果需要保证原始数据干净的话，也可以参考 React Fiber 的思路，构建一颗替身树进行数据写入，只要保留原始树节点的引用即可。这个需求就需要用比较 hack 的手段实现了，首先观察了一下 Table 组件的逻辑，只有在有children 的子节点上才会展示「展开更多」的图标。

所以思路就是，和后端约定一个字段比如 has_next，之后预处理数据的时候先遍历这些节点，加上一个假的占位 children。

之后在点击展开的时候，把节点上的这个假 children 删除掉，并且把通过改写节点上一个特殊的 is_loading 字段，在自定义渲染 Icon 的代码中判断，并且展示 Loading Icon。

又来到递归树的逻辑中，我们加入这样的一段代码：这里 onLoadMore 是用户传入的获取更多子节点的方法，

流程是这样的：

1. 节点展开时，先给节点写入一个正在加载的标志，然后把子数据重置为空。这样虽然节点会变成展开状态，但是不会渲染子节点，然后强制渲染。
2. 在加载完成后赋值了新的子节点 record[childrenColumnName] = childList 后，我们又通过 forceUpdate 去强制组件重渲染，展示出新的子节点。

需要注意，我们递归树加入逻辑的所有逻辑都在 rewriteTree 中，所以对于加入的新的子节点，也需要通过这个函数递归一遍，加入 level, parent 等信息。

新加入的节点的 level 需要根据父节点的 level 相加得出，不能从 1 开始，否则渲染的缩进线就乱掉了，所以这个函数需要改写，加入 parentNode 父节点参数，遍历时写入的 level 都要加上父节点已有的 level。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!