前言

• 对于长表格，需要滚动才能查看表头和横向滚动条，用户体验不好
• 通过max-height / height属性，给表格设置最大高度/高度，让表格内部显示一个滚动条的做法，可能会让页面有多个滚动条
• 虽然可以通过监听页面内容动态设置max-height / height属性，让页面保持一屏显示，但是当页面有多个表格或者其他内容块较多时，表格的可视区域较小
• 基于以上问题，我们需要让el-table支持随页面滚动的固定表头和横向滚动条

效果

原理

通过修改el-table内部样式，表头和滚动条设置sticky粘性定位实现

使用

安装

@planckdev/element-plus 文档地址：www.npmjs.com/package/@pl…

pnpm install @planckdev/element-plus

调用

注册指令

import { StickyTable } from '@planckdev/element-plus/directives'
const app = createApp(App)
app.directive('StickyElTable', StickyTable)

在vue文件中绑定到el-table标签上

<el-table v-sticky-el-table></el-table>

最后

感谢阅读~