React antd Descriptions span属性无效问题

label=“Status” span={3},但是span为3无效

<Descriptions title="User Info" layout="vertical" bordered><Descriptions.Item label="Product">Cloud Database</Descriptions.Item><Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item><Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item><Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item><Descriptions.Item label="Usage Time">2019-04-24 18:00:00</Descriptions.Item><Descriptions.Item label="Status" span={3}><Badge status="processing" text="Running" /></Descriptions.Item><Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item><Descriptions.Item label="Discount">$20.00</Descriptions.Item><Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item><Descriptions.Item label="Config Info">Data disk type: MongoDB<br />Database version: 3.4<br />Package: dds.mongo.mid<br />Storage space: 10 GB<br />Replication factor: 3<br />Region: East China 1<br /></Descriptions.Item></Descriptions>

原因:span={3} 这项,前面的span的总和需要是column的倍数,在上个例子中,
label="Status"前面的span总和为5,所以无效

解决方法:我是在动态值渲染中出现的这个问题
在label="Status"前面加一个

<Descriptions.Item span={column} />

其中column为Descriptions中column的值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360848.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在生产中检测和诊断慢速代码

开发人员面临的最困难的任务之一是查找和诊断生产中运行缓慢的代码。 首先&#xff0c;您如何监控生产代码而不放慢速度&#xff1f; 当然&#xff0c;您无法通过分析器运行生产代码。 即使您具有计时代码的机制&#xff0c;那么如何诊断问题呢&#xff1f; 如果您无法在开发环…

uni-app动态绑定class和style

目录动态绑定calss动态绑定style动态绑定calss class"[{‘类名’:条件},{‘类名’:条件},{‘类名’:条件}]" 为不同条件的image绑定不同的样式 <image class"img1" :class"[{img1:index 0},{img2:index 1},{img3:index 2}]":src"avt…

移动小球

描述 你有一些小球&#xff0c;从左到右依次编号为1&#xff0c;2&#xff0c;3&#xff0c;…&#xff0c;n&#xff0c; 你可以执行两种指令。其中A X Y表示把小球X移动到小球Y左边&#xff0c;B X Y表示把小球X移动到小球Y右边。指令保证合法&#xff0c;即X不等于Y。 输入 …

流式传输大数据:Storm,Spark和Samza

有许多分布式计算系统可以实时或近实时处理大数据。 本文将从对三个Apache框架的简短描述开始&#xff0c;并试图对它们之间的某些相似之处和不同之处提供一个快速的高级概述。 阿帕奇风暴 在风暴 &#xff0c;你设计要求的T opology实时计算的图&#xff0c;然后喂到集群&…

那天有个小孩跟我说LINQ(四)

小孩LINQ系列导航&#xff1a;&#xff08;一&#xff09; &#xff08;二&#xff09; &#xff08;三&#xff09; &#xff08;四&#xff09; &#xff08;五&#xff09; &#xff08;六&#xff09; &#xff08;七&#xff09; &#xff08;八&#xff09; 转载于:http…

uniapp使用阿里云多色图标

下载&#xff0c;然后解压 输入cmd&#xff0c;然后enter 输入 npm install -g iconfont-tools 再输入 iconfont-tools&#xff0c;然后一直enter&#xff0c;直到结束 目录会多了个iconfont-weapp文件&#xff0c;点击去找到 iconfont-weapp-icon.css 导入和使用 t-icon开头 接…

针对Java中的XSD验证XML

有许多工具可用于根据XSD 验证XML文档 。 其中包括操作系统脚本和工具&#xff0c;例如xmllint &#xff0c;XML编辑器和IDE&#xff0c;甚至是在线验证器。 由于前面提到的方法的局限性或问题&#xff0c;我发现拥有自己的易于使用的XML验证工具很有用。 Java使编写这样的工具…

细学PHP 09 MySql

1:mysql是什么&#xff1f;答&#xff1a;mysql是一种开源的&#xff0c;小型的数据库和&#xff30;&#xff28;&#xff30;结合的非常紧密 比较流行的LAMP组合 指 linux apache mysql php 2:我怎么样用Mysql&#xff1f;答&#xff1a;下载mysql并安装&#xff0c;装完之后…

修改 this 指向

文章目录前言一、new关键字改变this指向二、 call&#xff08;&#xff09;三、apply&#xff08;&#xff09;四 、bind&#xff08;&#xff09;五、总结前言 修改 this 指向,四种方法 一、new关键字改变this指向 //构造函数版this function Fn(){this.user "追梦子…

默认方法和多重继承

最近卢卡斯JOOQ埃德尔发布和文章有关嵌套类及其使用。 这是一个有趣的话题&#xff0c;他的文章一如既往地有趣并且值得一读。 我只同意一个简短的声明&#xff0c;我们有一个简短的回复链&#xff0c;导致默认方法&#xff0c;以及为什么不能有类似的东西 class Outer {<n…

uniapp uni.request GET方式请求,不能直接传数组解决方法

这里写目录标题目录遇到的问题 GET请求方法传数组解决方案目录 遇到的问题 GET请求方法传数组 想传一个数组&#xff0c;但是后台接受到的数据与浏览器中显示的数据和前台代码传的不一样&#xff1b; 前台代码打印 浏览器显示数据 其中HerbalNameList &#xff0c;变成了字…

休眠CascadeType.LOCK陷阱

介绍 引入了Hibernate 显式锁定支持以及Cascade Types之后 &#xff0c;就该分析CascadeType.LOCK行为了。 休眠锁定请求触发内部LockEvent 。 关联的DefaultLockEventListener可以将锁定请求级联到锁定实体子级。 由于CascadeType.ALL也包括CascadeType.LOCK &#xff0c;因…

c++中在堆和栈中申请空间的差别

堆中和栈中申请的空间的比较, 我找到了下面的比较: 栈的情况&#xff1a;栈上分配空间的好处是快&#xff0c;而且对象生存期是自动的&#xff0c;离开当前域之后就自动析构回收。坏处就是栈空间有限&#xff0c;而且不能人为控制对象的生存期&#xff0c;比如你无法将一个函数…

推销自己的海盗猫王运营商

因此&#xff0c;Java没有Elvis运算符&#xff08;或者更正式的名称是null合并运算符或null安全成员选择&#xff09;……虽然我个人不太在意它&#xff0c;但有些人似乎很喜欢它。 当一位同事需要几天后&#xff0c;我坐下来探讨了我们的选择。 而且你知道什么&#xff01; 您…

sunos 查cpu主频指令prtdiag

sun查cpu主频指令 usr/sbin/psrinfo -v ...虚拟处理器 63 在下列时间的状态&#xff1a;09/10/2013 14:23:52自 04/08/2013 17:41:40 开始已在运行。sparcv9 处理器以 2660 MHz 运行,而且有 sparcv9 浮点数处理器 sun的prtdiag指令: 查cpu个数 bash-3.2$ uname -a SunOS m5000…

使用CDI简化JAX-RS缓存

这篇文章&#xff08;通过一个简单的示例&#xff09;说明了如何使用CDI Producers使其在RESTful服务中利用缓存控制语义更加容易 与HTTP 1.0中可用的Expires标头相比&#xff0c; HTTP 1.1中添加了Cache-Control标头&#xff0c;这是急需的改进。 RESTful Web服务可以利用此标…

字符串字符和数字分割

现在有个String类型的字符串&#xff1a; String str"AA120"; 我想把它分解成 AA &#xff1b;120 就是把数字和字母分开&#xff1b; 求方法 补充&#xff1a; 格式是前面是字母 不确定几位&#xff0c;后面是数字&#xff0c;也不确定几位 就是"AA111…

transform限制position:fixed的跟随效果

我们应该都知道&#xff0c;position:fixed可以让元素不跟随浏览器的滚动条滚动&#xff0c;而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是&#xff0c;真是一物降一物&#xff0c;position:fixed固定效果却被小小的transform给干掉了&#xff0c;直…

Maven提示:有关可执行jar的所有信息

Maven提示&#xff1a;有关可执行jar的所有信息 在分发代码时&#xff0c;可执行jar是非常有用的工具。 这意味着&#xff0c;只要将Java安装在客户端计算机上&#xff0c;至少在Windows和Mac上&#xff0c;您的用户只需双击jar即可启动程序。 另外&#xff0c;在命令行上&…