如何实现React Ant Design树形表格的增删改操作及长尾词处理？

本文共计2264个文字，预计阅读时间需要10分钟。

最近因业务接触了antd，使用antd完成了一个复杂的树形表格的显示及修改。在这个过程中遇到了不少坑，很多功能antd只写了初步的功能，更细致的功能需要自己完善。踩过的坑都记录了下来。

最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。

树形表格的显示

在antd中对于表格的key值有着严格的控制，每一个row都必须有一个独一无二的key值，可以是数字也可以是字符串。这一点和我曾经使用过得iview有着很大的区别。react使用key来代表每一行是为了避免重新渲染的问题，这个优化也在实际的开发中带来了不少的问题。比如新建行时需要自定义新key。

下面直接上一下代码及代码效果，这是一个三级的树形表格，且其中包含二级标题。

最终效果 ​

colums标题: 简易版标题，随着功能的增加，我们将增加colums的复杂度。