elementUI table 表头吸顶效果

Element UI 的 Table 组件本身不直接提供表头吸顶的功能。但是，你可以通过自定义样式和监听滚动事件来实现这个效果。

以下是一个简单的示例，展示了如何实现表头吸顶效果：

<template>
  <div class="table-container">
    <div class="table-header" :style="{ position: sticky ? 'fixed' : 'relative' }">
      <!-- 表头内容 -->
    </div>
    <div class="table-body" @scroll="handleScroll">
      <!-- Element UI 的 Table 组件 -->
      <el-table :data="tableData">
        <!-- 列定义 -->
      </el-table>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      sticky: false,
      tableData: [
        // ...数据
      ]
    };
  },
  methods: {
    handleScroll(event) {
      this.sticky = event.target.scrollTop > 0;
    }
  }
};
</script>
 
<style scoped>
.table-container {
  height: 400px;
  overflow: hidden;
  position: relative;
}
 
.table-header {
  background-color: #fff;
  width: 100%;
  top: 0;
  z-index: 10;
  transition: all 0.2s;
}
 
.table-body {
  height: 100%;
  overflow-y: scroll;
  padding-top: 40px; /* 表头高度 */
}
</style>

在这个示例中，.table-container 是一个包裹着 .table-header 和 .table-body 的容器。.table-header 是表头的样式，它会根据滚动事件的触发变化其 position 属性。.table-body 是包含 Element UI Table 组件的滚动区域，它的 scroll 事件触发了 handleScroll 方法，该方法会根据滚动位置更新 sticky 状态，从而实现表头的吸顶效果。