ElementPlus table出现水平滚动条 滚不动且错位

ElementPlus版本：^2.0.1

场景描述：使用ElementPlus中的表格动态加载数据的时候，横向滚动条滚动错位或者根本滚动不到底部。
参考的文章：https://github.com/ElemeFE/element/issues/7948

解决：

<template>
    <el-table ref="table" :data="tableData" style="width: 100%">
      ....
    </el-table>
</template>
...
methods: {
  //动态加载数据的方法
  async changeData() {
    ....
    await queryData(); // 请求数据，并赋值给tableData
    this.$nextTick(() => {
      this.$refs.table.doLayout(); // 待表格数据更新完成之后重新渲染表格
    });
  }
}
...

原因：官网组件，动态加入数据并不会再次初始化。当缩放窗口就会初始化布局。动态加入数据加上css布局，这就导致了bug，滚动条错位。

注意点：必须要表格的数据获取到，并赋值给table绑定的数据tableData之后，再执行表格的doLayout方法才会生效。这里使用await就是为了确保queryData()结束之后才重新布局表格。

2022/11/20
实际使用官方提供的方法某些情况还是会存在该问题，最后使用的方法是通过v-if来重新渲染表格DOM来使滚动条重置。

<template>
    <el-table ref="table" :data="tableData" style="width: 100%" v-if="isShowTable">
      ....
    </el-table>
</template>
...
data() {
  return {
    ...
    isShowTable: true,
  }
}
methods: {
  //动态加载数据的方法
  async changeData() {
    ....
    await queryData(); // 请求数据，并赋值给tableData
    // 重新渲染table
    this.isShowTable = false;
    this.$nextTick(() => {
      this.isShowTable = true;
    });
  }
}
...