Ant Design Pro Table 中 alwaysShowAlert 配置的使用解析

背景介绍

在使用 Ant Design Pro 组件库中的 Pro Table 组件时，开发者经常会遇到需要自定义表格顶部提示信息的需求。默认情况下，Pro Table 的 tableAlertRender 提示信息只在用户选择了行数据时才会显示。但在某些业务场景下，我们需要这个提示信息始终可见，无论用户是否选择了行数据。

问题分析

在早期版本中，开发者尝试通过配置 alwayShowAlert: true（注意拼写错误）来实现提示信息常显的功能，但发现该配置无效。这实际上是由于属性名称拼写错误导致的。正确的属性名应该是 alwaysShowAlert（注意多了一个's'）。

解决方案

正确的配置方式是在 rowSelection 属性中设置 alwaysShowAlert: true：

rowSelection={{
  alwaysShowAlert: true,
  // 其他选择配置...
}}

实现原理

当设置 alwaysShowAlert 为 true 时，Pro Table 组件会忽略行选择状态，强制渲染 tableAlertRender 区域。这使得开发者可以在以下场景中灵活使用：

1. 显示表格数据统计信息
2. 展示操作指引或提示
3. 显示批量操作的按钮区域
4. 展示与表格相关的其他辅助信息

实际应用示例

<ProTable
  rowSelection={{
    alwaysShowAlert: true,
  }}
  tableAlertRender={({ selectedRowKeys, selectedRows }) => {
    return (
      <div>
        <span>当前共有 {selectedRows.length} 条数据被选中</span>
        <span>（默认提示信息，即使未选择也会显示）</span>
      </div>
    );
  }}
  // 其他表格配置...
/>

注意事项

1. 属性名称必须正确拼写为 alwaysShowAlert
2. 即使设置了常显，tableAlertRender 函数仍然会接收 selectedRowKeys 和 selectedRows 参数
3. 该配置不会影响行选择功能本身，只是控制提示信息的显示逻辑
4. 在最新版本中，该功能稳定可用，建议保持组件库版本更新

总结

通过正确使用 alwaysShowAlert 配置，开发者可以灵活控制 Pro Table 顶部提示区域的显示逻辑，满足各种业务场景下的需求。这一功能特别适合需要常显统计信息或操作区域的表格场景，提升了表格组件的实用性和灵活性。