Ant Design Pro 表格 columns 配置：组合 key 使用指南

在 Ant Design Pro 的 columns 配置中，可以使用 dataIndex 属性来指定数据源中的字段名，用于渲染表格列的内容。如果你需要使用组合的字段作为列的 dataIndex，可以使用 render 属性来自定义渲染函数。\n\n以下是一个示例代码：\n\njsx\nimport { Table } from 'antd';\n\nconst data = [\n {\n id: 1,\n name: 'John Doe',\n age: 25,\n },\n {\n id: 2,\n name: 'Jane Smith',\n age: 30,\n },\n];\n\nconst columns = [\n {\n title: 'ID',\n dataIndex: 'id',\n },\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Full Name',\n render: (text, record) => `${record.name} (${record.age})`,\n },\n];\n\nconst App = () => {\n return <Table dataSource={data} columns={columns} />;\n};\n\nexport default App;\n\n\n在上面的代码中，我们使用了 render 属性来定义了一个自定义的渲染函数，该函数接收两个参数 text 和 record，其中 text 是当前列的文本内容，record 是当前行的数据对象。我们可以在 render 函数中使用 record 的属性来组合成我们需要的内容。在这个示例中，我们使用了 record.name 和 record.age 来组合成 Full Name 列的内容。\n\n希望对你有帮助！