当前位置 博文首页 > wusq的博客：el-table设置最大列宽，不显示横向滚动条
el-table可以手动调整列宽，当拉得非常宽的时候会出现横向滚动条?
1.css设置不显示横向滚动条
/* 表格不出现横向滚动条 */
.el-table--scrollable-x .el-table__body-wrapper {
overflow-x: hidden;
}?2.设置最大列宽，查阅element官网文档，header-dragend事件可以查看修改前后的列宽
?
添加事件header-dragend
控制台打印结果?
headerDragend: function(newWidth, oldWidth, column) {
console.log(newWidth);
console.log(oldWidth);
console.log(column);
}?
?
用列?名column.label区分，设置选择列的最大列宽为100
if (column.label === '选择' && newWidth > 100) {
column.width = 100
}如果设置了show-overflow-tooltip和align="center"，可能会出现达到最大宽度后文字不剧中的情况，所以当宽度达到最大的时候不要显示tooltip就好了
headerDragend: function(newWidth, oldWidth, column) {
let totalWidth = document.body.clientWidth // 获取网页宽度
if (column.label === '选择' && newWidth > 100) {
column.width = 100
} else if (column.label === '名称') {
if (newWidth > totalWidth * 0.3) {
column.width = totalWidth * 0.3
column.showOverflowTooltip = false // 列宽足够时不需要show-overflow-tooltip
} else {
column.showOverflowTooltip = true
}
}
}?
cs