element-ui solves the dislocation problem of el-table form

1. The cause

The table header is dynamic, and then use the :height of el-table to realize the self-adaptation of the table height, and the misalignment problem occurs after dynamically adding columns on the page;

2. The phenomenon is as follows;

3. Solution:
The doLayout method can re-layout the table

ElementUI related document address:

https://element.eleme.cn/#/zh-CN/component/table#table-methods

doLayout

Re-layout the Table. This method may need to be called when the Table or its ancestor elements are switched from hiding to showing

this.$nextTick(() => {
   this.$refs.singleTable.doLayout(); // 解决表格错位
});

4. Solve the effect