解决-拖动el-table表头宽度导致表格最后一行显示不全-[全网最全]

el-table表头宽度调整导致最后一行显示不全，通常是由于表格高度未正确更新，或者表格容器的 height 属性设置不当引起的。可以尝试以下几种方法来解决此问题：

1. 调整 el-table 的 height 属性： 如果你设置了固定高度（如 height="500px"），可以尝试使用 :height="tableHeight"，并动态计算 tableHeight 值以适应容器的变化。例如：

   <el-table :data="tableData" :height="tableHeight" ...>
   </el-table>
   

   在 mounted 或 watch 中监听窗口大小变化，动态更新 tableHeight。

2. 使用 resize 监听器： 当用户拖动列宽时，可以监听 resize 事件，重新计算表格的高度，确保表格可以显示完整内容：

   mounted() {
     window.addEventListener('resize', this.handleResize);
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize);
   },
   methods: {
     handleResize() {
       this.tableHeight = this.calculateTableHeight();
     },
     calculateTableHeight() {
       // 根据实际情况动态计算表格高度
       return window.innerHeight - 100; // 示例计算方式
     }
   }
   

3. 检查容器的 overflow 属性： 确保表格的父级容器没有设置 overflow: hidden 或 overflow: auto，因为这可能导致最后一行无法显示完全。可以尝试设置为 overflow: visible。

4. 手动调用 doLayout 方法： 在列宽调整完成后手动触发 doLayout，强制刷新表格布局。

   this.$nextTick(() => {
     this.$refs.myTable.doLayout();
   });
   

   其中，myTable 是 el-table 的 ref 名称。

5. 暴力重新计算高度

<template>
  <el-table
  	ref="multipleTable"
    :data="tableData"
    @header-dragend="onHeaderDragEnd"
  >
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据
      ]
    };
  },
  methods: {
    onHeaderDragEnd() {
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();
      });
    }
  }
};
</script>