` import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { DownOutlined } from "@ant-design/icons";
import type { RadioChangeEvent } from "antd";
import { Form, Radio, Spin, Tag, Table } from "antd";
import type { SizeType } from "antd/es/config-provider/SizeContext";
import type { ColumnsType, TableProps } from "antd/es/table";
import type {
ExpandableConfig,
TableRowSelection
} from "antd/es/table/interface";
import { LoadingOutlined } from "@ant-design/icons";
const App = () => {
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
const handleExpand = (expanded: any, record: any) => {
console.log(expanded, expandedRowKeys, "expanded");
if (expanded) {
setExpandedRowKeys([...expandedRowKeys, record.key]);
} else {
if (expandedRowKeys.length > 0 && expandedRowKeys.includes(record.key)) {
const index = expandedRowKeys.indexOf(record.key);
expandedRowKeys.splice(index, 1);
console.log(expandedRowKeys, "expandedRowKeys");
setExpandedRowKeys([...expandedRowKeys]);
} else {
setExpandedRowKeys([]);
}
}
};
const expandedRowRender = (record: any) => {
return
{record.description}
;};
const handleClick = (record: any) => {
handleExpand(!expandedRowKeys.includes(record.key), record);
};
const dataSource = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"],
description: "这里是John Brown的描述信息"
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"],
description: "这里是Jim Green的描述信息"
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"],
description: "这里是Joe Black的描述信息"
}
];
const columns = [
{
title: "姓名",
dataIndex: "name",
key: "name"
},
{
title: "年龄",
dataIndex: "age",
key: "age"
},
{
title: "地址",
dataIndex: "address",
key: "address"
},
{
title: "操作",
key: "action",
render: (text: any, record: any) => (
<a onClick={() => handleClick(record)}>
{expandedRowKeys.includes(record.key) ? "收起" : "展开"}
)
}
];
return (
dataSource={dataSource}
columns={columns}
expandable={{
expandedRowRender,
expandedRowKeys,
onExpand: handleExpand
}}
/>
);
};
export default App;`
