vue3el-table悬浮表头

### 实现 Vue3 中 `el-table` 组件的悬浮表头效果

为了在 Vue3 的项目中使用 Element Plus 库中的 `el-table` 组件来创建具有固定或悬浮表头的效果，可以按照如下方法操作：

#### 设置表格高度和启用固定表头功能

Element Plus 提供了一个简单的配置选项用于开启固定表头的功能。当设置了表格的高度 (`height`) 或最大高度 (`max-height`) 属性时，表头会自动变为固定的。

<template>
  <div style="width: 100%;">
    <!-- 定义一个带有固定表头的表格 -->
    <el-table :data="tableData" height="250">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  // 更多数据项...
]);
</script>

上述代码片段展示了如何通过给 `<el-table>` 添加 `height` 属性使表头保持静止不动而其余部分可滚动[^1]。

#### 自定义样式调整

如果发现默认样式的固定列与其他自定义样式存在差异，则可能需要额外覆盖一些 CSS 类以确保视觉一致性。例如，在某些情况下，可能会遇到背景颜色不同步等问题；这时可以通过修改 `.el-table__fixed-header-wrapper` 和其他关联类的选择器来进行修正。

对于更复杂的场景比如想要实现真正的“悬浮”而非仅限于内部滚动区域内的固定位置，那么还需要考虑页面级别的布局设计以及监听窗口滚动事件等逻辑处理。