div实现antd Descriptions描述列表（可灵活修改、固定宽度）

效果如下图：
因为此处的需求需要不同的几个描述列表的label宽度位置固定。但是antd的Descriptions因为其宽度自适应原因，很难实现多个不同描述列表宽度的统一。所以这里用div重新写代码

样式：

.Descriptions {background: #fff;padding: 10px;.grid {width: 100%;border-right: 1px solid #E0E0E0;display: table;>div {padding: 8px !important;color: #435780;border: 1px solid;border-color: #E0E0E0;border-right: 0;border-bottom: 0;display: table-cell;&.title {background-color: rgb(250,250,250);min-height: 37.5px;color: #333;}&.content {color: #2D3040;min-height: 37.5px;word-break: break-all;//20220531新增。解决内容为纯数字时不自动跳行导致宽度错位问题word-wrap: break-word;//20220531新增。解决内容为纯数字时不自动跳行导致宽度错位问题}}&:last-child{>div{border-bottom: 1px solid #F0F0F0;}}}:global{.upload-list-inline{.ant-upload-list{>div{display: inline-block;}}}}
}

代码：
此处的宽度直接用的比较习惯用的24栅栏格式，这样需要多少宽度修改起来也比较方便；当然如果想改成别的宽度，也可以自定义修改
不足就是这里的列表是按行写定的。如果一行中某列需要调宽，则该行其他元素也要同步去修改

import React from 'react';
import styles from '../../../index.less';class UserMessage extends React.PureComponent {state = {data: {}};render() {const { data } = this.state;return (<div className={styles.Descriptions}><div className={styles.grid}><div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}>工单号</div><div style={{ width: 'calc(100% / (24/6))' }} className={styles.content}>DatabaseDatabase</div><div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}>省份</div><div style={{ width: 'calc(100% / (24/6))' }} className={styles.content}>Prepaid</div><div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}>地市</div><div style={{ width: 'calc(100% / (24/6))' }} className={styles.content}>YES</div></div><div className={styles.grid}><div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}>数据统计时间</div><div style={{ width: 'calc(100% / (24/14))' }} className={styles.content}>2018-04-24 18:00:00</div><div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}></div><div style={{ width: 'calc(100% / (24/6))' }} className={styles.content}></div></div></div>);}
}
export default UserMessage;

div实现antd Descriptions描述列表（可灵活修改、固定宽度）相关推荐

NG-ZORRO Descriptions描述列表自定义title样式（nz-descriptions-item）
如何在NG-ZORRO组件的描述列表中自定义nz-title样式需求描述: 使用NG-ZORRO组件中的Descriptions描述列表显示预约模块基础信息,物流组确认流程节点时,需要可以修改预约时 ...
antdesign Vue，使用table表格组件和Descriptions 描述列表组件。制作表格，改变边框样式和字体颜色样式。
这里是antdesign 默认的样式我们想要的:将边框颜色加深,字体颜色加深这里我封装了一个css文件: /* 打印弹窗的所有字体颜色加深,table 和 descriptions */ /dee ...
055_Descriptions描述列表
1. Descriptions描述列表 1.1. 列表形式展示多个字段. 1.2. Descriptions Attributes 参数说明类型可选值默认值 border 是否带有边框 boo ...
vue2 elementui描述列表
先看效果,elementui2.15.7支持el-descriptions,低版本的不支持.我是初学者,这里有几个要点 flex布局.滚动条样式等, 1 mock造数 mock这里使用了正则来造日期和 ...
9、HTML：有序列表（ol），无序列表（ul），描述列表（dl、dt、dd）详解
1.什么是列表什么是列表? 什么是有序列表? 什么是无序列表? 上面写的 3 句话就是一个列表,你懂得... 2.有序列表有序列表:英文叫做 ordered list,所以标签也是取这个词组的首字 ...
怎样直接在列表修改数据html,谈谈yii2-GridView如何实现列表页直接修改数据
做者:白狼出处:http://www.manks.top/yii2_gridview_advanced.html 本文版权归做者,欢迎转载,但未经做者赞成必须保留此段声明,且在文章页面明显位置给出原 ...
python 列表嵌套字典添加修改删除_【Python】列表嵌套字典修改字典里面的一个值却把全部的值都修改了。...
具体问题就是:当我往空列表里面添加字典,需要修改其中的一个键的值的时候,出现把其他同类的值也修改了. 下面就是出现问题的代码: aliens = [] new_alien = {"color ...
Python入门--列表元素的修改
#列表元素的修改 #为指定索引的元素赋予一个新值 #为指定的切片赋予一个新值 lst=[10,20,30,40] lst[2]=100#将索引为2的位置上的元素修改为100 print(lst)#[1 ...
IE的各种设置列表及禁止修改IE主页
IE的各种设置列表及禁止修改IE主页 Internet Explorer 设置 IE属性部分禁用常规页在HKEY_LOCAL_USER/Software/Policies/Microsoft/In ...
Python列表（获取列表中指定元素的索引、获取列表中的多个元素、判断指定元素是否在列表中存在、列表元素的遍历、列表元素的增加操作、列表元素的删除操作、列表元素的修改操作、列表元素的排序操作）
1.获取列表中指定元素的索引 eg1:未指定索引范围查找索引 zyr=['憨憨','憨宝'] print(zyr.index('憨宝')) print(zyr[1]) eg2:在指定索引范围内查找元素 ...

div实现antd Descriptions描述列表（可灵活修改、固定宽度）

div实现antd Descriptions描述列表（可灵活修改、固定宽度）相关推荐

最新文章

热门文章