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

但是有客户发现表格会有错位问题,当自己进行反复排查才复现出来。表格头和内容没有对齐
复现操作步骤
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方法,重新加载表格数据。
使用场景
- 数据更新:当表格数据发生变化时,调用此方法可以确保表格显示最新的数据。
- 重新加载:当需要重新加载表格数据时,例如从服务器获取最新数据后,可以调用此方法。
示例
假设你在某个方法中从服务器获取了新的数据,并希望更新表格:
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。










