### 实现
Vue2 和
ElementUI 中 `
el-table` 的
表头冻结与吸顶效果
为了实现 `
el-table`
表头的冻结和吸顶效果，可以结合 CSS 属性 `position: sticky` 来完成。以下是具体的实现方法：
#### HTML 结构
通过设置 `class
-name` 属性为指定列添加样式类名 `.sticky`，并定义其子元素 `.c
ell` 使用 `position: sticky`。
```html
<
el-table :data="
tableData" style="width: 100%">
<
el-table-column prop="id" lab
el="ID" width="180" class
-name="sticky">
<template slot
-scope="scope">
<p>{{ scope.row.id }}</p>
</template>
</
el-table-column>
<
el-table-column prop="name" lab
el="Name" width="180"></
el-table-column>
<
el-table-column prop="address" lab
el="Address"></
el-table-column>
</
el-table>
```
#### CSS 样式
针对 `.sticky` 类及其内部的单元格应用粘性定位，并调整垂直对齐方式以解决初始位置偏移的问题。
```css
.sticky {
vertical
-align: top !important;
}
.sticky .c
ell {
position: sticky;
background
-color: white; /* 防止背景透明 */
z
-index: 999; /* 提升层级防止被覆盖 */
top: 0; /* 设置吸顶距离顶部的位置 */
}
```
上述代码片段实现了第一列的吸顶效果[^1]。当页面发生滚动时，该列始终保持在视图顶端而
不消失。
#### JavaScript 数据源示例
提供一个简单的表格数据结构供测试使用。
```javascript
export default {
data() {
return {
tableData: [
{ id: '1', name: 'Tom', address: 'No. 189, Grove St, NY' },
{ id: '2', name: 'Jerry', address: 'No. 189, Grove St, NY' },
{ id: '3', name: 'Spike', address: 'No. 189, Grove St, NY' }
]
};
}
};
```
此配置文件展示了如何初始化包含三行记录的基础数据集用于渲染表格内容。
---
### 注意事项
- **浏览器兼容性**：需确认目标用户的主流浏览器是否完全支持 `position: sticky` 特性。
- **性能优化**：对于大数据量场景下频繁触发重绘可能导致卡顿现象，则应考虑虚拟化方案来提升用户体验[^2]。
---
在Vue项目中使用ElementUI时，可以通过在el-table组件上设置属性`show-header`并将其值设为`false`来实现表格表头的隐藏，这样可以创建无表头的展示表格。
扫一扫
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
