我就废话不多说了，大家还是直接看代码吧~
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=>{//通过配置给每个单元格添加不换行属性
constfun=()=>({style:{whiteSpace:'nowrap'}});
item.onHeaderCell=fun;
item.onCell=fun;
returnitem;
})}
loading={getting}
scroll={{x:'max-content'}}
//onHeaderCell={()=>({style:{whiteSpace:'nowrap'}})}
//onCell={()=>({style:{whiteSpace:'nowrap'}})}
//文档里说可以这么写但是我写了无效不知道原因
/>
补充知识：解决antdesignvue中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;
}
如果想要实现当鼠标光标滑过时，即可显示出被隐藏内容的效果，可采用如下方式
实例
部分模块用例信息已成功导入，其余模块用例正在导入中...
添加
{{record.preCondition}}
{{priority}}
前置条件
用例步骤
编辑
更多
复制
删除
其中，这段代码便是实现此功能的核心，title值便是指被隐藏的内容
另一个思路是设置每个单元格的min-width,不过我的项目中的内容是最好不要换行的
以上这篇Antd表格滚动宽度自适应不换行的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
