需求有些变态,我们用一段话和一张图来演示下
效果如下:
如遇到每级展开层级不一致的,如【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'