Element UI el-table 表格表头错位问题及解决方法

问题

Element 表格数据刷新后，表头和表格数据错位。

常见解决方式

一个是 Css 方法修复，但是好像没效果，可能场景不太一样

<el-table :data="tableData" border>
    <el-table-column :key="Math.random()" prop="date" label="日期"> </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>

.el-table th.gutter {
  display: table-cell !important;
}

JS 方法修复

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

剑走偏锋的解决方式

控制滚动条位置，触发表格重新计算

this.$refs.tableRef.bodyWrapper.scrollLeft++
this.$refs.tableRef.bodyWrapper.scrollLeft--

element table safari 表头和表格错位

• https://github.com/ElemeFE/element/issues/4976
• https://blog.csdn.net/Lucky_bo/article/details/111319319

.el-table__body {
  width: 100%;
  // 使表格兼容 safari，不错位
  table-layout: fixed !important;
}

.el-table__header,.el-table__body,.el-table__footer{
   width: 100%;
   table-layout: fixed !important;
}

body .el-table th.gutter {
  display: table-cell !important;
}

body .el-table colgroup.gutter {
  display: table-cell !important;
}

table {
  width: 100% !important;
}

参考文章

• https://blog.csdn.net/weixin_44594219/article/details/124017876
• https://blog.csdn.net/webfullstack/article/details/114625272