ProDescriptions 在最后一项【ProDescriptions.Item】设置合并列【span={2}】没有效果

[soeasyjx]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

使用ProDescriptions组件，并为其添加 column={2}属性，之后再其中添加若干Item子元素，同时在最后一个Item
上设置 span={2} ，没有达到合并两列的效果，在非最后一个Item上设置span={2} ，都以达到合并两列的效果，官方DEMO就有这个问题

code

其实就是官方文档的第一个demo 部分代码

import { ProDescriptions } from "@ant-design/pro-components";
import { Button } from "antd";
import dayjs from "dayjs";

export default () => {
  return (
    <ProDescriptions
      column={2}
      title="高级定义列表"
      tooltip="包含了从服务器请求，columns等功能"
    >
      <ProDescriptions.Item valueType="option">
        <Button key="primary" type="primary">
          提交
        </Button>
      </ProDescriptions.Item>
      <ProDescriptions.Item
        span={2}
        valueType="text"
        contentStyle={{
          maxWidth: "80%"
        }}
        renderText={(_) => {
          return _ + _;
        }}
        ellipsis
        label="文本"
      >
        这是一段很长很长超级超级长的无意义说明文本并且重复了很多没有意义的词语，就是为了让它变得很长很长超级超级长
      </ProDescriptions.Item>
      <ProDescriptions.Item
        label="金额"
        tooltip="仅供参考，以实际为准"
        valueType="money"
      >
        100
      </ProDescriptions.Item>
      <ProDescriptions.Item label="百分比" valueType="percent">
        100
      </ProDescriptions.Item>
      <ProDescriptions.Item
        label="选择框"
        valueEnum={{
          all: { text: "全部", status: "Default" },
          open: {
            text: "未解决",
            status: "Error"
          },
          closed: {
            text: "已解决",
            status: "Success"
          },
          processing: {
            text: "解决中",
            status: "Processing"
          }
        }}
      >
        open
      </ProDescriptions.Item>
      <ProDescriptions.Item
        label="远程选择框"
        request={async () => [
          { label: "全部", value: "all" },
          { label: "未解决", value: "open" },
          { label: "已解决", value: "closed" },
          { label: "解决中", value: "processing" }
        ]}
      >
        closed
      </ProDescriptions.Item>
      <ProDescriptions.Item label="进度条" valueType="progress">
        40
      </ProDescriptions.Item>
      <ProDescriptions.Item label="日期时间" valueType="dateTime">
        {dayjs().valueOf()}
      </ProDescriptions.Item>
      <ProDescriptions.Item label="日期" valueType="date">
        {dayjs().valueOf()}
      </ProDescriptions.Item>
      <ProDescriptions.Item label="日期区间" valueType="dateTimeRange" span={2}>
        {[dayjs().add(-1, "d").valueOf(), dayjs().valueOf()]}
      </ProDescriptions.Item>
    </ProDescriptions>
  );
};

🏞 期望结果

不管哪一个Item 设置其属性span 都希望能有效果

💻 复现代码

线上DEMO

© 版本信息

• ProComponents 版本: 2.3.5
• umi 版本:3.5.0
• 浏览器环境:Chrome 113
• 开发环境 mac OS

[chenshuai2144]

最后一项要怎么生效，感觉没有必要的样子

[JackRoy1992]

最后一项要怎么生效，感觉没有必要的样子

比如说某一项是会显示/隐藏切换的，span为2的是某一行的第一列，就会因为前面隐藏了一列，而到上一行的最后，本身占两列的span为2的项可能就样式出现问题了。期望是这种情况下，它就不要到上一行的最后一列
@chenshuai2144

[catmiao8]

最后一项要怎么生效，感觉没有必要的样子

比如说某一项是会显示/隐藏切换的，span为2的是某一行的第一列，就会因为前面隐藏了一列，而到上一行的最后，本身占两列的span为2的项可能就样式出现问题了。期望是这种情况下，它就不要到上一行的最后一列 @chenshuai2144

可以设置 官网文档的例子没有占一整行是因为用了``强制换行了 导致没有占满一整行

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

是的，你观察得很正确。问题出在了标签的换行上。在 ProDescriptions.Item 中使用``标签强制换行后，设置 span={2} 并不能正常合并两列。为了解决这个问题，你可以使用 flex 布局来实现列的合并效果。

这是一个解决方案的示例代码：

import { ProDescriptions } from "@ant-design/pro-components";
import { Button, Space } from "antd";
import dayjs from "dayjs";

export default () => {
  return (
    <ProDescriptions
      column={2}
      title="高级定义列表"
      tooltip="包含了从服务器请求，columns等功能"
    >
      <ProDescriptions.Item valueType="option" span={2}>
        <Space>
          <Button key="primary" type="primary">
            提交
          </Button>
          <Button key="secondary" type="secondary">
            取消
          </Button>
        </Space>
      </ProDescriptions.Item>
      <ProDescriptions.Item
        valueType="text"
        contentStyle={{
          maxWidth: "80%"
        }}
        renderText={(_) => {
          return _ + _;
        }}
        ellipsis
        label="文本"
        span={2}
      >
        这是一段很长很长超级超级长的无意义说明文本并且重复了很多没有意义的词语，就是为了让它变得很长很长超级超级长
      </ProDescriptions.Item>
      <ProDescriptions.Item label="金额" valueType="money">
        100
      </ProDescriptions.Item>
      <ProDescriptions.Item label="百分比" valueType="percent">
        100
      </ProDescriptions.Item>
      <ProDescriptions.Item
        label="选择框"
        valueEnum={{
          all: { text: "全部", status: "Default" },
          open: {
            text: "未解决",
            status: "Error"
          },
          closed: {
            text: "已解决",
            status: "Success"
          },
          processing: {
            text: "解决中",
            status: "Processing"
          }
        }}
      >
        open
      </ProDescriptions.Item>
      <ProDescriptions.Item
        label="远程选择框"
        request={async () => [
          { label: "全部", value: "all" },
          { label: "未解决", value: "open" },
          { label: "已解决", value: "closed" },
          { label: "解决中", value: "processing" }
        ]}
      >
        closed
      </ProDescriptions.Item>
      <ProDescriptions.Item label="进度条" valueType="progress">
        40
      </ProDescriptions.Item>
      <ProDescriptions.Item label="日期时间" valueType="dateTime">
        {dayjs().valueOf()}
      </ProDescriptions.Item>
      <ProDescriptions.Item label="日期" valueType="date">
        {dayjs().valueOf()}
      </ProDescriptions.Item>
      <ProDescriptions.Item label="日期区间" valueType="dateTimeRange" span={2}>
        {[dayjs().add(-1, "d").valueOf(), dayjs().valueOf()]}
      </ProDescriptions.Item>
    </ProDescriptions>
  );
};

通过使用 span={2} 来合并两列，并在需要合并的项上使用 Space 组件来实现按钮的排列，可以解决标签换行导致的样式问题。

希望这个解决方案能够帮助你解决问题。如果有更多问题，请随时提问。