el-table设置最大列宽，不显示横向滚动条

最新推荐文章于 2024-08-19 11:53:47 发布

sqwu

最新推荐文章于 2024-08-19 11:53:47 发布

阅读量1.3w

点赞数 5

本文链接：https://blog.csdn.net/qq_42345108/article/details/104538236

版权

本文介绍了如何在el-table中设置最大列宽以防止出现横向滚动条。通过css设置不显示滚动条，并利用element组件的header-dragend事件监听列宽变化，设定最大宽度为100。针对百分比形式的列宽，使用网页可见宽度作为最大限制。同时，解决在达到最大宽度时，文字居中和显示tooltip的问题。

摘要由CSDN通过智能技术生成

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);
      
    }