在项目中碰到一个需求，个人觉得还挺有意思。正好在自学 vue3 + vite + ts 封装组件库，小试牛刀。需求是一个表格，表格头和特定行吸顶，其余部分可以正常滚动；目前 element-plus 支持特定列固定，貌似没有行固定的功能，那就自己写一下。
大概长这个样子，弄了一回写出来了，基本上就是围绕着 position: sticky 做文章。
表格参数
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 表格的数据 | Array | - | - |
| columns | 表格头数据 | Array | - | - |
| border | 表格是否显示边框 | Boolean | - | false |
| stickyKey | 控制是否吸顶的字段名 | String | - | 'isSticky' |
| max | 吸顶部分最多显示几行数据 | Number | - | 3 |
| rowHeight | 行高度 | Number | - | 40 |
表格事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| row-click | triggers when a row is clicked | row |
npm install @boacho/sticky-table
// main.ts
import { createApp } from 'vue'
import StickyTable from '@boacho/sticky-table'
import '@boacho/sticky-table/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(StickyTable)
app.mount('#app')
简单封装了下上传到 npm 了，持续更新优化～
