antd 能自适应吗_Antd表格滚动 宽度自适应 不换行的实例

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

className={styles.table}

rowKey={(record) => 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'属性 导致内容换行

}

}

}

或者可以这样设置

pagination={false}

rowKey={record => 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;

}

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

实例

:columns="columns"

:dataSource="data"

showHeader

:pagination="ipagination"

@c