为antd树形table加上连接线

antd: ^5.18.3

业务说：这个table缩进层级看不太出来，加个连接线吧，吭哧吭哧翻文档发现没有官方支持，又不想去换其他组件，只能自己实现，先看一下最终效果（demo）:

接下来讲一下详细思路和实现，也是记录一下，可能不是最优，欢迎讨论

1. 前置准备

数据准备

随便编的一组数据，足够了

const treeData = [
    {
   
        uid: 25,
        name: "Node 1",
        age: 18,
        children: [
            {
   
                uid: 34,
                name: "Node 2",
                age: 20,
                children: [
                    {
   
                        uid: 12,
                        name: "Node 3",
                        age: 30,
                        children: [
                            {
   
                                uid: 26,
                                name: "Node 4",
                                age: 40,
                                children: []
                            }
                        ]
                    },
                    {
   
                        uid: 28,
                        age: 60,
                        name: "Node 5",
                        children: []
                    }
                ]
            },
            {
   
                uid: 27,
                age: 70,
                name: "Node 6",
                children: [
                    {
   
                        uid: 50,
                        age: 60,
                        name: "Node 15",
                        children: []
                    },
                    {
   
                        uid: 23,
                        age: 60,
                        name: "Node 16",
                        children: []
                    },
                    {
   
                        uid: 45,
                        age: 60,
                        name: "Node 17",
                        children: []
                    }
                ]
            }
        ]
    },
    {
   
        uid: 88,
        name: "Node 7",
        age: 18,
        children: [
            {
   
                uid: 90,
                name: "Node 8",
                age: 20,
                children: [
                    {
   
                        uid: 68,
                        name: "Node 9",
                        age: 30,
                        children: [
                            {
   
                                uid: 77,
                                name: "Node 10",
                                age: 40,
                                children: []
                            },
                            {
   
                                uid: 72,
                                age: 60,
                                name: "Node 13",
                                children: []
                            }
                        ]
                    },
                    {
   
                        uid: 73,
                        age: 60,
                        name: "Node 11",
                        children: []
                    }
                ]
            },
            {
   
                uid: 41,
                age: 70,
                name: "Node 12",
                children: []
            },
            {
   
                uid: 91,
                age: 60,
                name: "Node 14",
                children: []
            }
        ]
    }
];
export default treeData

树形数据结构操作

GPT真好用！

const findPathToNode = (dataTmp, id, path = []) => {
   
    for (let i = 0; i < dataTmp.length; i++) {
   
        if (dataTmp