自定义antd table子表格的展开和收起，一键展开收起

 效果：

代码： 

import React from 'react';
import {Table} from 'antd';
const key = []; // 定义一个空的数组。
export default class xiaoyu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            open: false,

            arr: [],
        };
    }

    open = (e, record) => {
        if (e.target.innerHTML == '展开') {
            key.push(record.key); // 点击的每一行的key的值保存下来。

            this.setState({
                arr: key,
            });

            e.target.innerHTML = '收起';
        } else if (e.target.innerHTML == '收起') {
            key.splice(key.indexOf(record.key), 1); // 再次点击的时候从数组删除上次存入的key值。

            this.setState({
                arr: key,
            });

            e.target.innerHTML = '展开';
        }
    };

    render() {
        const columns = [
            {title: 'Name', dataIndex: 'name', key: 'name'},

            {title: 'Age', dataIndex: 'age', key: 'age'},

            {title: 'Address', dataIndex: 'address', key: 'address'},

            {
                title: 'Action',
                dataIndex: '',
                key: 'x',
                render: (text, record) => (
                    <a href="javascript:;" onClick={e => this.open(e, record)}>
                        展开
                    </a>
                ),
            },
        ];

        const data = [
            {
                key: 1,
                name: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
                description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
            },

            {
                key: 2,
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
                description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
            },

            {
                key: 3,
                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
                description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
            },
        ];

        return (
            <div>
                <Table
                    columns={columns}
                    expandedRowRender={record => <p style={{margin: 0}}>{record.description}</p>}
                    dataSource={data}
                    expandedRowKeys={this.state.arr}
                    rowKey={row => row.key}
                />
            </div>
        );
    }
}

原理：

表格 Table - Ant Design

 可以用来操作一键展开和一键收起