antd design中的table组件怎么在同一个栏位同时传入两个字段
时间: 2024-02-03 09:15:30 浏览: 209
在 Ant Design 的 Table 组件中,每个 Column 组件代表一列数据,而每个 Column 组件可以通过传入 render
属性来自定义该列的渲染方式。
如果你想在同一个栏位同时展示两个字段,可以在 render
属性中返回一个包含两个字段的 React 元素。例如:
import { Table } from 'antd';
const dataSource = [
{ name: 'John', age: 32, gender: 'Male' },
{ name: 'Jane', age: 28, gender: 'Female' },
];
const columns = [
{
title: 'Name & Age',
dataIndex: 'name',
key: 'name',
render: (text, record) => (
<div>
<p>{text}</p>
<p>{record.age}</p>
</div>
),
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
},
];
const DemoTable = () => {
return <Table dataSource={dataSource} columns={columns} />;
};
在上面的例子中,第一个 Column 组件的 render
属性中返回了一个包含两个字段的 div
元素,其中第一个字段展示了名字,第二个字段展示了年龄。第二个 Column 组件则正常渲染了 gender
字段。
你可以根据自己的需求灵活地使用 render
属性来自定义 Table 组件的渲染方式。