Ant Design 6.4.4:Descriptions 嵌套 Table 撑宽与响应式列数的坑终于修了

2026-06-12 62 预计阅读时间: 1 分钟
来源: oschina.net AI 摘要 Original link

Disclaimer: This article is an AI-assisted summary. Read it together with the original source when precision matters. The summary may omit context, version differences, or edge cases and is not official documentation.

预计阅读时间:5 分钟

6.4.4 是一个小版本,但修的两个 Descriptions bug 在实际项目里踩过的人不少——嵌套 Table 时宽度莫名撑到屏幕外、响应式 column 传对象后列数表现和预期不一致。加上 Radio.Group button 方向的修正,这次更新值得顺手升一下。

Descriptions 嵌套 Table,宽度不再失控

在详情页里用 Descriptions 包一层 Table 展示子列表,是常见做法。但之前版本存在一个问题:Table 的 width: 100% 或列宽总和会撑破 Descriptions 的单元格边界,导致整个描述列表横向溢出,尤其在窄屏或侧边弹窗里非常明显。

6.4.4 修复了内部对嵌套表格宽度的约束逻辑,Table 现在会正确地被限制在 Descriptions 分配的单元格空间内。

下面是一个典型的嵌套场景,升级后不再需要手动加 overflow: hidden 或硬设 maxWidth

import { Descriptions, Table } from 'antd';

const orderItems = [
  { key: '1', name: '机械键盘', qty: 2, price: 599 },
  { key: '2', name: '显示器支架', qty: 1, price: 189 },
];

function OrderDetail() {
  return (
    <Descriptions title="订单详情" bordered column={2}>
      <Descriptions.Item label="订单号">ORD-20250618-001</Descriptions.Item>
      <Descriptions.Item label="状态">已发货</Descriptions.Item>
      <Descriptions.Item label="商品列表" span={2}>
        {/* 升级 6.4.4 后,Table 不会再撑破 Descriptions 宽度 */}
        <Table
          size="small"
          pagination={false}
          dataSource={orderItems}
          columns={[
            { title: '名称', dataIndex: 'name' },
            { title: '数量', dataIndex: 'qty' },
            { title: '单价', dataIndex: 'price' },
          ]}
        />
      </Descriptions.Item>
    </Descriptions>
  );
}

升级前,如果弹窗宽度只有 480px,上面的 Table 很可能直接把整个 Descriptions 撑到 600px+,右侧内容被截断。升级后 Table 自动适配单元格宽度。

响应式 column 传对象,行为回归预期

Descriptions 支持响应式 column——传一个对象如 { xxl: 4, xl: 3, md: 2, sm: 1 },组件会根据视口宽度自动切换列数。但之前版本在部分断点下计算有偏差:比如视口明明处于 md 范围,却仍然按 xl 的 3 列渲染,导致窄屏下标签和值挤在一行。

6.4.4 修正了断点匹配逻辑,现在传对象时每个断点都能正确生效。

import { Descriptions } from 'antd';

function ResponsiveDetail() {
  return (
    <Descriptions
      title="设备信息"
      bordered
      // 修复后每个断点都会正确匹配
      column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}
    >
      <Descriptions.Item label="型号">MacBook Pro 16</Descriptions.Item>
      <Descriptions.Item label="芯片">M4 Pro</Descriptions.Item>
      <Descriptions.Item label="内存">24 GB</Descriptions.Item>
      <Descriptions.Item label="存储">512 GB SSD</Descriptions.Item>
    </Descriptions>
  );
}

如果你之前因为响应式不生效而被迫用 useBreakpoint 手动切换,现在可以回到对象配置方式,代码更简洁。

Radio.Group button 方向修正

本次还修复了 Radio.Groupbutton 样式下的一个渲染问题(issue 编号被截断,但属于按钮方向/排列相关的修正)。如果你用了 Radio.GroupbuttonStyle="solid" 或自定义方向,升级后排列表现会更稳定。

升级建议

6.4.4 是纯 bugfix 版本,无 API 变更、无破坏性改动,升级风险极低:

# npm
npm install antd@6.4.4

# yarn
yarn add antd@6.4.4

# pnpm
pnpm add antd@6.4.4

升级后检查清单:

  • 搜索项目里 Descriptions 嵌套 Table 的地方,移除之前为防溢出手动加的 style={{ overflow: 'hidden' }}maxWidth hack,验证宽度是否自然收敛。
  • 搜索 column={{ ... }} 对象配置的 Descriptions,在窄屏下确认列数是否按预期切换。
  • 检查 Radio.Group button 样式的排列是否正常。

如果以上场景都没用到,升级只是多一份保险,不会影响现有行为。


相关推荐