element ui table组件 异步加载数据盒子位移

  使用element ui 中的 table组件时 ，异步加载数据，然后渲染上去时会出现td与th对不齐，但是重新重新进一次就有又好了，但是对于用户体验肯定是不行的。

 这个时候只需要使用element ui 里的内置方法doLayout重新加载一下table就好了

 

解决方法

<el-table ref="multipleTable" :data="tableData"></el-table>

// 1.监听table 绑定的数据
watch: {
    tableData: {
      handler() {
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout();
        });
      },
      deep: true,
      immediate: true,
    },
  },

// 2.调用接口获取数据后使用
getTableData().then(res={
this.tableData = res.data
 this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
   });
})