Antd表格滚动 宽度自适应 不换行的实例

我就废话不多说了,大家还是直接看代码吧~

 record.key}
    columns={columns}
    dataSource={dataSource}
    scroll={{ x: 'max-content' }} // 加上这条 横向滚动 支持此属性的浏览器内容就不会换行了
    pagination={false}
   />

styles.less

.table {
 :global {
  .ant-table-thead > tr > th {
   background: #fff !important;
   white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
  }
  .ant-table-tbody >tr> td {
   white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
  }
 }
}

或者可以这样设置

record.key} dataSource={projectList} columns={this.columns.map(item => { // 通过配置 给每个单元格添加不换行属性 const fun = () => ({ style: { whiteSpace: 'nowrap' } }); item.onHeaderCell = fun; item.onCell = fun; return item; })} loading={getting} scroll={{ x: 'max-content' }} // onHeaderCell={() => ({ style: { whiteSpace: 'nowrap' } })} // onCell={() => ({ style: { whiteSpace: 'nowrap' } })} // 文档里说可以这么写 但是我写了无效 不知道原因 />

补充知识:解决ant design vue中table表格内容溢出后,设置的width失效问题,超出的字用省略号代替

style.css

通过设置css样式,可实现溢出内容以…代替,其中max-width的设置很重要,必须有

/*统一table表格的尺寸*/
.ant-table{
 table-layout: fixed;
}
.ant-table-tbody > tr > td {
 max-width: 200px;
 min-width: 70px;
 border-bottom: 0;
 /*text-align: center !important;*/
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 word-wrap: break-word;
 word-break: break-all;
}

如果想要实现当鼠标光标滑过时,即可显示出被隐藏内容的效果,可采用如下方式

实例






其中,这段代码便是实现此功能的核心,title值便是指被隐藏的内容

另一个思路是设置每个单元格的min-width, 不过我的项目中的内容是最好不要换行的

以上这篇Antd表格滚动 宽度自适应 不换行的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(Antd表格滚动 宽度自适应 不换行的实例)