使ElementUI的el-table表头自动吸顶，支持左右固定列

ElementUI的el-table组件本身不支持表头自动吸顶功能，但可以通过CSS和JavaScript实现。以下是一个示例代码，演示了如何实现表头自动吸顶的效果：

<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      height="200"
      :header-cell-style="{ background: '#303133', color: '#fff' }"
    >
      <el-table-column fixed type="index" width="50"></el-table-column>
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="200"></el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ]
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      const tableHeader = document.querySelector('.el-table__header-wrapper');
      if (tableHeader) {
        if (scrollTop > this.$el.offsetTop) {
          tableHeader.style.position = 'fixed';
          tableHeader.style.top = '0';
          tableHeader.style.width = '100%';
          tableHeader.style.zIndex = '1001';
        } else {
          tableHeader.style.position = '';
          tableHeader.style.top = '';
          tableHeader.style.width = '';
          tableHeader.style.zIndex = '';
        }
      }
    }
  }
};
</script>
 
<style>
.table-container {
  margin-top: 20px; /* 确保有足够的空间滚动 */
  height: 500px; /* 容器高度，确保出现滚动条 */
  overflow: auto;
}
</style>

在这个示例中，我们为表格外层包裹了一个div.table-container，并为它添加了滚动事件监听。在handleScroll方法中，我们检查了页面的滚动位置，并根据滚动位置动态改变表头的position、top和width属性，从而实现表头的吸顶效果。这个方案并不完美，因为它没有考虑左右固定列的情况，且可能会与ElementUI的其他样式冲突。如果需要更复杂的表头吸顶功能，可能需要自定义表格组件或使用其他成熟的解决方案。