Skip to content

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

Open
@soeasyjx

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions