Antd可展开表格 自定义按钮控制展开隐藏

默认：
展开：

import { Table } from 'antd';
import React from 'react'
export default class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            expandedRowKeys: [],
        };
    }
    open = (record) => {
        let expandedRowKeys= JSON.parse(JSON.stringify(this.state.expandedRowKeys));//一定要深拷贝 不然数组更改视图不更新
        let spliceIndex = expandedRowKeys.findIndex(item=>record.id===item);
        if(spliceIndex > -1){
            expandedRowKeys.splice(spliceIndex,1)
        }else{
            expandedRowKeys.push(record.id)
        }
        this.setState({
            expandedRowKeys
        })
        console.log(this.state.expandedRowKeys);
    }
    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: (record) => <a onClick={() => this.open(record)}>展开</a> },
        ];
        const data = [
            { id: 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.' },
            { id: 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.' },
            { id: 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}
                    rowKey={(record) => record.id}
                    expandable={{
                        expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,//展开行渲染内容
                        rowExpandable: record => record.description ? true : false,//全部开启展开属性
                        expandIconColumnIndex:-1,//隐藏默认的加号
                        expandIconAsCell:false
                    }}
                    dataSource={data}
                    expandedRowKeys={this.state.expandedRowKeys}
                />
            </div>
        );
    }
}

更多属性配置移步:antd官网，如果觉得有用的话可以给作者点个赞喔~