Ant Design中空数据表格能否隐藏表头并展示自定义布局？

官方能力说明 #

Ant Design 目前没有提供专属prop来实现无数据时隐藏整个表格（含表头）的效果，自带的locale.emptyText配置仅支持替换表格主体区域的空状态提示，无法隐藏表头，和你测试的结果一致。

推荐实现方案 #

最稳定无兼容问题的方式是直接做条件渲染，不需要写hack逻辑：

• 提前判断最终要在表格里展示的数据长度
• 数据为空时，直接渲染你准备的自定义空状态布局，不挂载Table组件
• 存在有效数据时，再正常渲染Table组件即可

基础实现代码参考：

const BusinessPage = () => {
  // 表格数据源，实际场景中可能来自接口返回、状态管理
  const [tableData, setTableData] = useState([])

  const columns = [
    // ...其余列配置
    {
      title: 'Requester',
      dataIndex: 'requester',
      key: 'requester',
      width: '10%',
      defaultFilteredValue: 'User1',
      ...getColumnSearchProps('requester', searchInput, handleSearch, handleReset, filterObj),
    },
  ]

  return (
    <div className="table-wrapper">
      {tableData.length === 0 ? (
        // 替换成你需要的自定义空状态布局
        <div className="custom-empty-block">
          暂无符合条件的数据，请调整筛选规则后重试
        </div>
      ) : (
        <Table
          rowKey="id"
          columns={columns}
          dataSource={tableData}
          // 其余Table配置项
        />
      )}
    </div>
  )
}

筛选场景适配注意点 #

如果你配置了默认筛选规则、或者支持用户手动筛选，判断空状态时不要用原始全量数据源长度，要拿经过筛选、分页处理后的最终展示数据做判断：

• 如果是前端分页筛选的非受控Table，可以通过Table的onChange回调拿到当前筛选后的结果集，用这个结果集的长度判断空状态
• 如果是服务端分页筛选的场景，直接判断接口返回的当前页数据长度即可

不推荐通过CSS强制隐藏.ant-table-thead类名的hack方案：这类方案强依赖Ant Design的内部类名实现，版本升级如果调整了内部类名结构就会直接失效，维护成本很高。

内容的提问来源于stack exchange，提问作者Ayushi