React ProTable 多表格共用列配置，动态渲染表头标题

在上述代码中，有两个ProTable组件，它们共享相同的columns配置。如果你想要根据不同的条件来判断它们的表头各不一样，你可以使用render属性来动态渲染表头。

首先，你可以使用一个状态变量来表示当前的条件，比如isSystemTable表示是否是系统及中间件修改点的表格。

然后，在columns配置中，你可以使用render属性来根据条件返回不同的表头，如下所示：

const [isSystemTable, setIsSystemTable] = useState<boolean>(true);

// ...

const columns: ProColumns[] = [
  // ...

  {
    title: '自测报告',
    width: 100,
    dataIndex: 'selfTest',
    align: 'center',
    hideInSearch: true,
    render: (_, record) => {
      return isSystemTable ? <span>自测报告</span> : <span>应用自测报告</span>;
    },
  },

  // ...
];

在上述代码中，根据isSystemTable的值，当它为true时，render返回的是系统及中间件修改点的表头，当它为false时，render返回的是应用修改点的表头。

然后，在ProTable组件中，你可以根据条件来渲染不同的表格，如下所示：

<ProCard>
  <ContentCard title="系统及中间件 修改点">
    {isSystemTable ? (
      <ProTable
        columns={columns}
        dataSource={dataPoint}
        search={{
          labelWidth: 100,
        }}
        options={false}
        bordered={true}
        pagination={false}
      />
    ) : null}
  </ContentCard>

  <ContentCard title="应用修改点">
    {!isSystemTable ? (
      <ProTable
        columns={columns}
        dataSource={dataPoint}
        search={false}
        options={false}
        bordered={true}
        pagination={false}
      />
    ) : null}
  </ContentCard>
</ProCard>

在上述代码中，根据isSystemTable的值，当它为true时，渲染系统及中间件修改点的表格，当它为false时，渲染应用修改点的表格。

最后，你可以根据业务需要，在适当的地方更新isSystemTable的值，以切换表格的显示。

希望对你有帮助！