Open
Description
提问前先看看:
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 都希望能有效果
💻 复现代码
© 版本信息
- ProComponents 版本: 2.3.5
- umi 版本:3.5.0
- 浏览器环境:Chrome 113
- 开发环境 mac OS