antd树型表格的逐级展开折叠（每次展开都只展开到当前未展开的最小层级，每次折叠都只折叠到当前未折叠的最大层级）

需求有些变态，我们用一段话和一张图来演示下

效果如下：

如遇到每级展开层级不一致的，如【2级2】展开到第3级，那此时点击展开，所有已展开的不动，将未展开到第3级的其他元素全部展开到第3级

效果如下：所有3级展开

折叠同理：如下，【2级2-1】收起，但当前未折叠的最大层级为【5级】

此时需要注意，我们应把没有子元素的【1级】，及末级均去掉，不参与折叠展开事件

效果如下：【5级】收起

再点击收起：【4级】收起

话不多说，代码直接上：

import React, { useEffect, useState, useMemo, useRef } from 'react';
import {
    Table,
    Button,
} from 'antd';
import { connect } from 'umi';
import { cloneDeep, isEqual, xorWith, isEmpty } from 'lodash';


const QualityEvaluationAccount = () => {
    // 所有已展开list
    const [expandedList, setExpandedList] = useState([])
    // 所有表格已展开key
    const [expandedKeys, setExpandedKeys] = useState([])

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
            width: '12%',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            width: '30%',
            key: 'address',
        },
    ];
    const dataSource = [
        {
            key: 1,
            name: '我是一级（一）',
            age: 60,
            address: 'New York No. 1 Lake Park',
            level: 1,
            children: [
                {
                    key: 11,
                    name: '2级1',
                    age: 42,
                    address: 'New York No. 2 Lake Park',
                    level: 2,
                },
                {
                    key: 12,
                    name: '2级2',
                    age: 30,
                    address: 'New York No. 3 Lake Park',
                    level: 2,
                    children: [
                        {
                            key: 121,
                            name: '3级3-1',
                            age: 16,
                            address: 'New York No. 3 Lake Park',
                            level: 3,
                            children: [
                                {
                                    key: 1211,
                                    name: '4级4-1',
                                    age: 16,
                                    address: 'New York No. 3 Lake Park',
                                    level: 4,
                                    children: [
                                        {
                                            key: 12111,
                                            name: '5级5-1',
                                            age: 16,
                                            address: 'New York No. 3 Lake Park',
                                            level: 5,
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
                {
                    key: 13,
                    name: '2级3',
                    age: 72,
                    address: 'London No. 1 Lake Park',
                    level: 2,
                    children: [
                        {
                            key: 131,
                            name: '3级3-1',
                            age: 42,
                            address: 'London No. 2 Lake Park',
                            level: 3,
                            children: [
                                {
                                    key: 1311,
                                    name: '4级4-1',
                                    age: 25,
                                    address: 'London No. 3 Lake Park',
                                    level: 4,
                                },
                                {
                                    key: 1312,
                                    name: '4级4-2',
                                    age: 18,
                                    address: 'London No. 4 Lake Park',
                                    level: 4,
                                    children: [
                                        {
                                            key: 13111,
                                            name: '5级5-1',
                                            age: 23,
                                            address: 'London No. 31 Lake Park',
                                            level: 5,
                                        },
                                        {
                                            key: 13112,
                                            name: '5级5-2',
                                            age: 11,
                                            address: 'London No. 41 Lake Park',
                                            level: 5,
                                            children: [
                                                {
                                                    key: 131121,
                                                    name: '6级6-1',
                                                    age: 23,
                                                    address: 'London No. 31 Lake Park',
                                                    level: 6,
                                                },
                                                {
                                                    key: 131122,
                                                    name: '6级6-2',
                                                    age: 11,
                                                    address: 'London No. 41 Lake Park',
                                                    level: 6,
                                                },
                                            ],
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
            ],
        },
        {
            key: 2,
            name: '我是一级（2）',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            level: 1,
            children: [
                {
                    key: 21,
                    name: '2极2-1',
                    age: 23,
                    address: 'London No. 31 Lake Park',
                    level: 2,
                    children: [
                        {
                            key: 211,
                            name: '3极3-1',
                            age: 23,
                            address: 'London No. 31 Lake Park',
                            level: 2,
                        },
                        {
                            key: 212,
                            name: '3级3-2',
                            age: 11,
                            address: 'London No. 41 Lake Park',
                            level: 2,
                        },
                    ],
                },
                {
                    key: 22,
                    name: '2级2-2',
                    age: 11,
                    address: 'London No. 41 Lake Park',
                    level: 2,
                },
            ],
        }, {
            key: 3,
            name: '我是一级（3）',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            level: 1
        }
    ];

    // 获取树结构最大深度
    const findDeep = (obj, level = 1) => {
        let maxLev = level
        obj.children?.forEach(item => {
            if (item.children !== null) {
                const nestLevel = findDeep(item, level + 1)
                maxLev = Math.max(maxLev, nestLevel)
            }
        })
        return maxLev
    }


    const maxLevel = findDeep(dataSource[0])
    console.log('maxLevel', maxLevel)
    let arrNew = []
    const treeList = (arr) => {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].hasOwnProperty("children")) {
                treeList(arr[i].children)
            }
            // 所有没有子集的元素均不参与展开折叠，如1级与最深层级子集
            // 因为最深层级子集无子集，所以参与展开折叠的为它的上一级
            // 第一级也不参与展开折叠
            if (!((arr[i].level === 1 || arr[i].level === maxLevel) && isEmpty(arr[i].children))) {
                arrNew.push(child(arr[i]))
            }
        }
        return arrNew;
    }

    const child = (arr) => {
        arr.children = []
        return arr;
    }

    const flatData = treeList(cloneDeep(dataSource))
    console.log('flatData', flatData)

    // 手动展开
    const open = (expanded, record, event) => {
        // console.log('expandedexpandedexpandedexpanded', expanded)
        let data = cloneDeep(expandedKeys)
        if (expanded) {
            let keys = [...data, record.key]
            setExpandedKeys(keys)
            let arr = []
            getSelectKeysData(keys, arr)
            setExpandedList(arr)
        } else {
            data.forEach((item, index) => {
                if (item === record.key) {
                    data.splice(index, 1)
                }
            })
            setExpandedKeys(data)
            let arr = []
            getSelectKeysData(data, arr)
            setExpandedList(cloneDeep(arr))
        }
    }


    // 获取已展开的key
    const getSelectKeysData = (data, arr) => {
        flatData.forEach(item => {
            data.forEach(ele => {
                if (ele === item.key) {
                    arr.push(item)
                }
            })
        })
    };


    // 展开逻辑
    // 1.先看是否全部折叠状态，如果expandedKeys为空，则展开1级

    const expand = () => {
        let level = 1
        let expandedData = cloneDeep(expandedList)
        console.log('expandedList', expandedList, expandedKeys)
        if (expandedKeys.length === 0) {
            level = 1
        } else {
            // 比较已经选择的和所有数据，筛选出未选择的条目，然后找出未展开的最小层级
            // 无需关注已展示的层级，只需要找出未选中的最小层级，去展开即可
            // 寻找两数组差集
            const unqi = xorWith(flatData, expandedData, isEqual)
            console.log('unqi', unqi)

            // 查找未展开的最小层级
            level = Math.min.apply(Math, unqi.map(function (o) { return o.level }))
            console.log('level', level)
        }

        let res = []
        console.log('flatData', flatData, level)
        flatData.forEach(item => {
            if (item.level === level) {
                // 将未展开key写入
                if (!res.includes(item.key) && !expandedKeys.includes(item.key)) {
                    res.push(item.key)
                }
            }
        })
        const keys = [...expandedKeys, ...res]
        setExpandedKeys(keys.sort((a, b) => a - b))
        let arr = []
        getSelectKeysData(cloneDeep(keys), arr)
        setExpandedList(cloneDeep(arr))
    }


    // 折叠逻辑：
    // 1.从已展开keys中找到level最大的，即为最大没有被收起的
    const shouqi = () => {

        let exList = cloneDeep(expandedList)
        let exKeys = cloneDeep(expandedKeys)

        // 只需要找出已展开的最大层级，去收起即可
        let level = Math.max.apply(Math, exList.map(function (o) { return o.level }))

        console.log('shouqi- level', level)
        let keyList = []
        exList.forEach((item, index) => {
            if (item.level === level) {
                keyList.push(item.key) // 找出要删除的key
            }
        })
        console.log('exList', exList, keyList)

        // 在已展开keys中删除key
        // 取已展开列表和删除列表的两数组差集
        const unqi = xorWith(exKeys, keyList, isEqual)
        console.log('unqi', unqi)
        setExpandedKeys(unqi)
        let arr = []
        getSelectKeysData(unqi, arr)
        console.log('arr-====', arr)
        setExpandedList(cloneDeep(arr))
    }


    return (
        <>
            <Button onClick={expand}>展开</Button>
            <Button onClick={shouqi}>折叠</Button>

            <Table
                columns={columns}
                dataSource={dataSource}
                rowKey={record => record.key}
                expandedRowKeys={expandedKeys}
                onExpand={(record, event) => open(record, event)}
            />
        </>
    );
}

export default QualityEvaluationAccount;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359