el-table 左侧固定表头 频繁切换导致表头丢失 滚动条滑动列表错位

这个问题通常是由于在频繁切换Table的显示/隐藏状态或者更新数据源时，组件没有正确地重新计算表格的布局导致的。可以尝试以下几种解决方法：

1. 使用v-if代替v-show来控制Table的显示和隐藏，因为v-if会确保在条件为假时，组件根本不会被渲染，而v-show会保持组件在DOM中，只是设置样式为display: none。
2. 在数据更新后，使用Vue的$nextTick方法确保DOM已经更新完成后再重新计算表格布局。
3. 如果使用了第三方的UI库（如Element UI），可以查看该库是否提供了重新计算表格布局的API，如Element UI的doLayout方法，并在数据更新或显示/隐藏后调用。
4. 确保你使用的是最新版本的UI库，有时候这类问题可能是由于库的Bug导致的，更新到最新版本可能会解决问题。

以下是一个简单的示例代码，展示如何在Vue中使用v-if和$nextTick来避免表头丢失：

<template>
  <div>
    <el-button @click="toggleTable">Toggle Table</el-button>
    <div v-if="showTable">
      <el-table
        :data="tableData"
        height="200"
        ref="myTable"
        :fit="true"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="Date"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="Name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="Address">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showTable: true,
      tableData: [
        // ...数据
      ]
    };
  },
  methods: {
    toggleTable() {
      this.showTable = !this.showTable;
      if (!this.showTable) {
        // 如果隐藏表格，直接返回，不执行更多操作
        return;
      }
      // 显示表格后，更新DOM并重新计算表格布局
      this.$nextTick(() => {
        if (this.$refs.myTable) {
          this.$refs.myTable.doLayout();
        }
      });
    }
  }
};
</script>

在这个例子中，我们使用了v-if来控制表格的渲染，并在切换显示状态时调用this.$refs.myTable.doLayout();（如果myTable存在）来确保表格布局正确。doLayout方法是Element UI表格组件提供的用于重新计算表格布局的方法，确保表头固定等功能正常工作。