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
      }

3.百分比形式的列宽，由于列宽都是准确的数据，所以我决定用网页可见宽度来设置最大宽度。

如果设置了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
        }
      }
    }

4.将每一项都按照实际情况设置完整就可以了