zoukankan      html  css  js  c++  java
  • antd-table——内容展示变型

    bug单:

    https://github.com/ant-design/ant-design/issues/13825

    1.设置固定宽度:在columns中设置widht或者className

    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        // 100,
    }, {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        // 200,
    }

    2.用可展开的table,布局会好看很多

     3.动态生成dom:

    columns={[
      ...
      render: (text, record) => (
        <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          {text}
        </div>
      ),
    ]}

    4.设置样式:

      .ant-table-fixed {
        table-layout: fixed;
      }
    
      .ant-table-tbody > tr > td {
        word-wrap: break-word;
        word-break: break-all;
      }

    .ant-table-tbody > tr > td {
        white-space: nowrap;
    }
    .ant-table-thead > tr > th{
        white-space: nowrap;
    }
    .ant-table-thead tr {
      display: flex;
    }
    .ant-table-thead th {
      flex: 1;
    }
    .ant-table-row {
      display: flex;
    }
    .ant-table-row td {
      flex: 1;
      overflow: auto;
    }
    .ant-table-row td::-webkit-scrollbar {
      display: none;
    }
    .columns {
      display: flex;
      align-items: center;
       0;
    }

    5.宽度不够:

    scroll={{ x: true }}
    :scroll="columns.length>0?{ x: '130%' }:{}"

    6.样式设置:强制换行

    //添加word-wrap:break-word时(只对那些超出容器宽度的单词进行拆分,而不影响其他正常单词。)
            
        <div style="150px;height:70px;background:red;word-wrap:break-word">
           I am a good boy, hahahahhahahahahahaha everyone likes me...
        </div>
    //添加word-break:break-all时(拆分所有单词)
     
        <div style="150px;height:70px;background:red;word-break:break-all">
           I am a good boy, hahahahhahahahahahaha everyone very likes me...
        </div></span>

     设置文字省略:

    style=" 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
    .textOverflow{
        white-space: nowrap!important;
        overflow: hidden!important;
        text-overflow: ellipsis!important;
        max- 118px;
    }
  • 相关阅读:
    Linux内核使用的GNUC扩展
    linux常用命令--开发调试篇
    代码示例_poll的多路复用
    硬件_红外传感器
    硬件_霍尔感应器
    全志_功能引脚配置_sys_config.fex
    知识_嵌入式常用词汇
    代码示例_Input 按键驱动
    Vmware_安装_tools
    Ubunt_配置_start
  • 原文地址:https://www.cnblogs.com/wheatCatcher/p/11536030.html
Copyright © 2011-2022 走看看