实现element-ui 的 el-table 表头自动吸顶功能（sticky）

在Element UI中，el-table组件本身不提供表头自动吸顶的功能。但是，您可以通过CSS来实现这个效果。以下是实现表头自动吸顶的一个基本示例：

1. 给el-table添加一个外层容器，并设置一个固定的高度，使得表格有滚动条。
2. 使用CSS的position: sticky属性来使表头吸顶。

HTML:

<template>
  <div class="table-wrapper">
    <el-table :data="tableData" header-cell-style="background-color: #333; color: #fff;">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

CSS:

<style scoped>
.table-wrapper {
  height: 300px;
  overflow-y: auto;
}
 
.table-wrapper .el-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #333;
  color: #fff;
  z-index: 100;
}
 
.table-wrapper .el-table th,
.table-wrapper .el-table tr {
  border-color: #444;
}
</style>

JavaScript:

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 填充数据
      ]
    };
  }
};
</script>

在这个例子中，.table-wrapper是一个具有固定高度和滚动条的外层容器。在CSS中，el-table th设置了position: sticky和top: 0，这样表头就会在滚动到顶部时吸顶。z-index确保表头在其他内容之上。边框颜色通过选择器.el-table th, .el-table tr进行了调整，以确保在吸顶时边框的显示效果。