码迷,mamicode.com
首页 > 其他好文 > 详细

antd-table——内容展示变型

时间:2019-09-17 19:17:13      阅读:712      评论:0      收藏:0      [点我收藏+]

标签:lips   ali   round   ddr   github   设置   back   rdb   red   

bug单:

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

技术图片

 

 

 

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

{
    title: ‘年龄‘,
    dataIndex: ‘age‘,
    key: ‘age‘,
    //width: 100,
}, {
    title: ‘住址‘,
    dataIndex: ‘address‘,
    key: ‘address‘,
    //width: 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;
  width: 0;
}

5.宽度不够:

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

6.样式设置:强制换行

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

 设置文字省略:

style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
.textOverflow{
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    max-width: 118px;
}

 

antd-table——内容展示变型

标签:lips   ali   round   ddr   github   设置   back   rdb   red   

原文地址:https://www.cnblogs.com/wheatCatcher/p/11536030.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!