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

YING-FINE

已于 2022-05-31 17:07:54 修改

阅读量8k

点赞数 2

分类专栏： react 文章标签： react.js javascript 前端

于 2022-05-20 17:57:37 首次发布

本文链接：https://blog.csdn.net/qq_40761136/article/details/124887939

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文档介绍了一种替代antd Descriptions的方法，通过使用div和CSS实现固定宽度的描述列表。代码示例展示了如何创建具有24栅栏格式的宽度，并调整各列宽度以适应不同内容需求。这种方法的缺点在于调整某一列宽度时，同一行的其他列也需要同步修改。

摘要由CSDN通过智能技术生成

效果如下图：
因为此处的需求需要不同的几个描述列表的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;