解决 el-table 不停无限拉伸的问题，数据重新渲染无限伸长

原创已于 2022-04-29 11:09:07 修改 · 6.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-04-29 11:06:08 首次发布

本文介绍了如何解决Vue中Element-UI的el-table组件在浏览器缩放时出现的无限拉伸问题。通过设置表格的最大高度`max-height`和应用自适应样式，可以避免表格在不同缩放比例下拉伸。关键步骤包括设置表格宽度为100%，以及针对表头和表体设置固定宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决 el-table 不停无限拉伸的问题

1.找了很多解决办法不管用，最终解决办法如下
（1）设置表格的max-height

 <el-table border :data="tableData" max-height="500px">

（2）设置完发现虽然没问题，但是浏览器缩放依然存在无限拉伸的问题，这时需要做自适应

::v-deep .el-table{
    width: 100%;
    .el-table__header-wrapper table,.el-table__body-wrapper table{
      width: 100% !important;
    }
    .el-table__body, .el-table__footer, .el-table__header{
      table-layout: auto;
    }
  }