React ProTable: 如何在同一页面使用相同列定义创建两个具有不同表头的表格

{"title": "React ProTable: 如何在同一页面使用相同列定义创建两个具有不同表头的表格", "description": "本文介绍了如何在 React 中使用 ProTable 库，在同一页面上使用相同的列定义，创建两个具有不同表头的表格。通过对表格列定义进行简单的修改，可以轻松实现这一功能。", "keywords": "React, ProTable, 表格, 表头, 不同, 页面, 同一, 列定义, 修改, 代码", "content": "可以通过给两个表格的columns数组中的每个列设置不同的title来实现表头各不一样的效果。具体做法如下：\n\n在第一个表格的columns中，将"应用版本"改为"应用版本1"，"问题单号"改为"问题单号1"。\n\n在第二个表格的columns中，将"应用版本"改为"应用版本2"，"问题单号"改为"问题单号2"。\n\n修改后的代码如下：\n\n\nconst columns1: ProColumns[] = [\n {\n title: \'序号\',\n width: 50,\n dataIndex: \'index\',\n align: \'center\',\n valueType: \'index\',\n },\n {\n title: \'应用\',\n dataIndex: \'application\',\n align: \'center\',\n // hideInSearch: activeKey === \'0\',\n // hideInTable: activeKey === \'0\',\n valueType: \'select\',\n fieldProps: {\n mode: \'multiple\',\n maxTagCount: 1,\n // options: projectLine,\n },\n },\n {\n title: \'应用版本1\',\n dataIndex: \'applicationType\',\n hideInSearch: true,\n align: \'center\',\n // hideInTable: activeKey === \'0\',\n },\n {\n title: \'问题单号1\',\n dataIndex: \'problemTest\',\n hideInSearch: true,\n align: \'center\',\n // hideInTable: activeKey === \'0\',\n },\n ...\n];\n\nconst columns2: ProColumns[] = [\n {\n title: \'序号\',\n width: 50,\n dataIndex: \'index\',\n align: \'center\',\n valueType: \'index\',\n },\n {\n title: \'应用\',\n dataIndex: \'application\',\n align: \'center\',\n // hideInSearch: activeKey === \'0\',\n // hideInTable: activeKey === \'0\',\n valueType: \'select\',\n fieldProps: {\n mode: \'multiple\',\n maxTagCount: 1,\n // options: projectLine,\n },\n },\n {\n title: \'应用版本2\',\n dataIndex: \'applicationType\',\n hideInSearch: true,\n align: \'center\',\n // hideInTable: activeKey === \'0\',\n },\n {\n title: \'问题单号2\',\n dataIndex: \'problemTest\',\n hideInSearch: true,\n align: \'center\',\n // hideInTable: activeKey === \'0\',\n },\n ...\n];\n\n...\n\nreturn (\n <PageContainer>\n <ProCard>\n <ContentCard title=\"系统及中间件 修改点\">\n <ProTable\n columns={columns1}\n dataSource={dataPoint}\n search={{\n labelWidth: 100,\n }}\n options={false}\n bordered={true}\n pagination={false}\n />\n </ContentCard>\n <ContentCard title=\"应用修改点\">\n <ProTable\n columns={columns2}\n dataSource={dataPoint}\n search={ false}\n options={false}\n bordered={true}\n pagination={false}\n />\n </ContentCard>\n </ProCard>\n </PageContainer>\n);\n\n\n"}