antd是一个基于React的UI组件库,其中包含了一些常用的组件,如表格(Table)。在antd的表格中,可以使用expandable属性来实现可展开的行,即在每一行的末尾添加一个展开按钮,点击按钮可以展开该行的详细信息。
要从每次单击expandable按钮时展开的antd表格中获取数据,可以通过以下步骤实现:
const data = [
{
key: '1',
name: 'John Doe',
age: 28,
address: 'New York',
details: 'Some details about John Doe',
},
// 其他数据行...
];
import React from 'react';
import { Table } from 'antd';
const MyTable = () => {
const handleExpand = (expanded, record) => {
console.log('Expanded:', expanded);
console.log('Record:', record);
// 在这里可以处理展开按钮的点击事件,获取到当前展开的行的数据
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const expandedRowRender = (record) => {
return <p>{record.details}</p>;
};
return (
<Table
columns={columns}
dataSource={data}
expandable={{
onExpand: handleExpand,
expandedRowRender: expandedRowRender,
}}
/>
);
};
export default MyTable;
在handleExpand函数中,可以通过record参数获取到当前展开的行的数据。你可以根据需要进行进一步的处理,例如将数据存储到状态中或发送到后端进行处理。
这样,每次单击expandable按钮时,你就可以从antd表格中获取到展开行的数据了。
注意:以上代码示例中并未提及具体的腾讯云产品,如需了解腾讯云相关产品和产品介绍,请参考腾讯云官方文档或咨询腾讯云官方客服。
领取专属 10元无门槛券
手把手带您无忧上云