ElementUI's table header dislocation problem solved

1. It is suitable for Google Chrome but not for other browsers. Zooming the table will cause the table to be misplaced.

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

2. When using the el-table in element-ui, we usually fix the table header, resulting in misalignment problems after data updates in various scenarios , and table misalignment problems.

As shown below:

 Check the element-ui official website and find that the official website provides the doLayout method to solve this problem

First, you need to add ref to el-table

1. Execute after data update

this.tableData= res.data;
// 在数据更新后执行
this.$nextTick(() => {
      if (this.$refs.reftbale&& this.$refs.reftbale.doLayout) {
        this.$refs.reftbale.doLayout();
      }
})

2. The misalignment problem that occurs when the browser window size changes

// 绑定window onresize事件
window.onresize = () => {
      if (this.$refs.reftbale&& this.$refs.reftbale.doLayout) {
        this.$refs.reftbale.doLayout();
      }
}