vue的vxe&table表格组件错位问题

原本正常是这样的表格一一对齐

但是有客户发现表格会有错位问题，当自己进行反复排查才复现出来。表格头和内容没有对齐

复现操作步骤

1、当后滚动滚动条到往右拉动

2、此时切换到另一个页面，然后再回到次页面（加了路由缓存）

发现表格头又固定到最开始的，但是表格的内容是正常的

在activated 生命周期里添加方法 refreshData()

<vxe-table ref="xTable"></vxe-table>

this.$refs.xTable.refreshData()

this.$refs.xTable.refreshData() 是 Vxe-Table 组件中的一个方法，用于刷新表格的数据。具体来说：

• this.$refs.xTable：通过 ref 属性获取到 Vxe-Table 实例。
• refreshData()：调用该实例的 refreshData 方法，重新加载表格数据。

使用场景

1. 数据更新：当表格数据发生变化时，调用此方法可以确保表格显示最新的数据。
2. 重新加载：当需要重新加载表格数据时，例如从服务器获取最新数据后，可以调用此方法。

示例

假设你在某个方法中从服务器获取了新的数据，并希望更新表格：

methods: {
  async fetchData() {
    try {
      const response = await this.$axios.get('/api/data');
      this.tableData = response.data;
      this.$refs.xTable.refreshData();
    } catch (error) {
      console.error('Failed to fetch data:', error);
    }
  }
}

在这个示例中，fetchData 方法从服务器获取数据并更新 tableData，然后调用 this.$refs.xTable.refreshData() 刷新表格。

注意事项

• 确保 xTable 是 Vxe-Table 的 ref 名称。
• 确保在调用 refreshData 之前，表格已经渲染完成并且 this.$refs.xTable 不为 undefined。