Antd实现表格滚动宽度自适应并不换行_程序开发

Antd实现表格滚动宽度自适应并不换行

创始人

2024-11-17 17:22:23

0次

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, 不过我的项目中的内容是最好不要换行的

上一篇：如何安装Anaconda3和使用Jupyter

下一篇：使用java实现一个简单的ATM项目

Antd实现表格滚动宽度自适应并不换行

前置条件

用例步骤

相关内容

热门资讯