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的设置很重要，必须有


.ant-table{
 table-layout: fixed;
}
.ant-table-tbody > tr > td {
 max-width: 200px;
 min-width: 70px;
 border-bottom: 0;
 
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 word-wrap: break-word;
 word-break: break-all;
}

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

实例

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

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

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

转载请注明：文章转载自 www.mshxw.com

本文地址：https://www.mshxw.com/it/68149.html

上一篇原生js实现贪吃蛇游戏

下一篇 vue3.0 加载json的方法（非ajax）