elementUI Table组件实现表头吸顶效果

在Element UI的Table组件中，要实现表头吸顶效果，你可以利用Vue.js的响应式特性以及一些CSS技巧。首先，在模板中设置Table组件，并确保包含一个固定头部（fixed-header）属性。示例如下：

<template>
  <el-table :data="tableData" :header-cell-style="{ background: '#fff', position: 'sticky', top: 0, zIndex: 1 }">
    <!-- 表头 -->
    <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" fixed></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        ... // 其他列
      ],
    };
  },
};
</script>

在这个例子中，我们设置了表头的样式，使其背景色为白色，定位为`position: sticky`，顶部距离页面为0（`top: 0`），并将z-index设置为1以便于吸顶显示。`fixed`属性使得表头始终保持在视口上方。