ant design react 表格通过点击指定方法展开子内容

import React from 'react'
import { Table, Badge, Menu, Dropdown, Space, Switch } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const { Column } = Table;

export default class SubTable extends React.Component {
  state = {
    firstRow: false,
    secondrow: false,
    dataSource: [
      {
        key: "0",
        name: "Edward King 0",
        expandable: false
      },
      {
        key: "1",
        name: "Edward King 1",
        expandable: false
      }
    ]
  };

  handleChnage = key => {
    let k = parseInt(key);
    let data = this.state.dataSource;
    let value = data[k].expandable;
    data[k].expandable = !value;
    this.setState({
      dataSource: data
    });
  };

  render() {
    const { dataSource } = this.state;
    return (
      <Table
        bordered
        dataSource={dataSource}
        pagination={false}
        expandRowByClick={true}
        expandable={{
          expandedRowRender: record => (
            <p style={{ margin: 0 }}>{"Here is expandable row"}</p>
          ),
          rowExpandable: record => record.expandable
        }}
      >
        <Column title="name" dataIndex="name" width="30%" editable={true} />
        <Column
          align="right"
          render={(text, record, index) => {
            return <Switch onChange={() => this.handleChnage(record.key)} />;
          }}
        />
      </Table>
    );
  }
}

或者

import React from 'react'
import { Table, Badge, Menu, Dropdown, Space,  } from 'antd';

const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "address" }
];

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."
  }
];

function customIcon(props) {
  let record = props.record;
  return <a onClick={e => props.onExpand(record, e)}>{record.name}</a>;
}


export default class SubTable extends React.Component {

  render() {
    return (
      <Table
        columns={columns}
        expandedRowRender={record => (
          <p style={{ margin: 0 }}>{record.description}</p>
        )}
        dataSource={data}
        // expandRowByClick={true}
        expandIcon={customIcon}
      />
    );
  }
}