{"id":16582656,"url":"https://github.com/lruihao/el-table-sticky","last_synced_at":"2025-08-20T10:33:01.048Z","repository":{"id":175490982,"uuid":"653676892","full_name":"Lruihao/el-table-sticky","owner":"Lruihao","description":"A plugin includes a set of directives to make the header, footer and horizontal scrollbar sticky or make highly adaptive of Element UI (Vue 2) tables.","archived":false,"fork":false,"pushed_at":"2024-06-05T09:30:34.000Z","size":1785,"stargazers_count":95,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-14T06:33:56.856Z","etag":null,"topics":["el-table","el-table-sticky","element-ui","v-height-adaptive","v-sticky-footer","v-sticky-h-scroll","v-sticky-header","vue","vue-directive","vue2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@cell-x/el-table-sticky","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lruihao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-14T14:03:49.000Z","updated_at":"2024-12-05T09:58:34.000Z","dependencies_parsed_at":"2024-04-01T08:32:27.950Z","dependency_job_id":"27d35fc8-8951-4469-8575-e9bc6dc3faad","html_url":"https://github.com/Lruihao/el-table-sticky","commit_stats":null,"previous_names":["lruihao/el-table-sticky"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lruihao%2Fel-table-sticky","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lruihao%2Fel-table-sticky/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lruihao%2Fel-table-sticky/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lruihao%2Fel-table-sticky/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lruihao","download_url":"https://codeload.github.com/Lruihao/el-table-sticky/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230415318,"owners_count":18222158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["el-table","el-table-sticky","element-ui","v-height-adaptive","v-sticky-footer","v-sticky-h-scroll","v-sticky-header","vue","vue-directive","vue2"],"created_at":"2024-10-11T22:33:40.932Z","updated_at":"2025-08-20T10:33:01.041Z","avatar_url":"https://github.com/Lruihao.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# el-table-sticky\n\n[在线示例](https://lruihao.github.io/el-table-sticky/)\n\n\u003e 一个用于实现 Element UI (Vue 2) 表格的表头吸顶、表尾吸底、滚动条吸底以及高度自适应功能的指令集插件。\n\n## 背景\n\nElement UI 的表格组件在使用时，如果表格内容过多，表格会出现滚动条，但是表头不会吸顶，表尾合计行也不会吸底，这样在表格内容过多时，表头和表尾合计行就会被遮挡，如果有横向滚动条，每次想滚动必须滑动到最底下，这一系列痛点，非常影响用户体验。\n\n**Element UI 的解决办法**：通过设置 `max-height` 或者 `height` 属性来实现上述需求。\n\n**Element UI 的解决不足点**：高度值只支持设置数字型，在实际开发中往往需要借助 JS 来计算。\n\n为了解决以上痛点/需求，减少开发和维护成本，于是就有了这个插件，详见 [思路分析](http://lruihao.cn/projects/el-table-sticky/)。\n\n## 特性\n\n`v-sticky-*` 指令依赖于 `position: sticky` 属性，不支持 IE 浏览器。\n\n- [x] 支持表头吸顶 (v-sticky-header)\n- [x] 支持表尾合计行吸底 (v-sticky-footer)\n- [x] 支持横向滚动条吸底 (v-sticky-scroller)\n- [x] 支持高度自适应 (v-height-adaptive)\n\n## 安装\n\n```bash\nnpm install @cell-x/el-table-sticky\n```\n\n## 注册指令\n\n全局注册指令：\n\n```js\nimport elTableSticky from '@cell-x/el-table-sticky'\n\nVue.use(elTableSticky)\n\n// 或者\n\nVue.use(elTableSticky, {\n  StickyHeader: {\n    // 吸顶偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等\n    offsetTop: 0,\n    // 滚动条吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等\n    offsetBottom: 0,\n  },\n  StickyFooter: {\n    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等\n    offsetBottom: 0,\n  },\n  StickyScroller: {\n    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等\n    offsetBottom: 0,\n  },\n  HeightAdaptive: {\n    // 底部偏移量，只能是数字型\n    offsetBottom: 0,\n  }\n})\n```\n\n局部注册指令：\n\n```js\nimport {\n  StickyHeader,\n  StickyFooter,\n  StickyScroller,\n  HeightAdaptive,\n} from '@cell-x/el-table-sticky'\n\nexport default {\n  directives: {\n    StickyHeader: new StickyHeader({ offsetTop: 0, offsetBottom: 0 }).init(),\n    StickyFooter: new StickyFooter({ offsetBottom: 0 }).init(),\n    StickyScroller: new StickyScroller({ offsetBottom: 0 }).init(),\n    HeightAdaptive: new HeightAdaptive({ offsetBottom: 0 }).init(),\n  }\n}\n```\n\n## 使用\n\n```html\n\u003cel-table v-sticky-header\u003e...\u003c/el-table\u003e\n\u003cel-table v-sticky-footer\u003e...\u003c/el-table\u003e\n\u003cel-table v-sticky-scroller\u003e...\u003c/el-table\u003e\n\u003cel-table v-height-adaptive\u003e...\u003c/el-table\u003e\n```\n\n## 指令参数\n\n| 指令                | 说明               | 修饰符    | 类型                     | 默认值                        |\n| ------------------- | ------------------ | --------- | ------------------------ | ----------------------------- |\n| `v-sticky-header`   | 表头吸顶指令       | `.always` | `Object{Number, String}` | offsetTop: 0, offsetBottom: 0 |\n| `v-sticky-footer`   | 表尾合计行吸底指令 | `.always` | `Object{Number, String}` | offsetBottom: 0               |\n| `v-sticky-scroller` | 横向滚动条吸底指令 | `.always` | `Object{Number, String}` | offsetBottom: 0               |\n| `v-height-adaptive` | 高度自适应指令     | -         | `Object{Number}`         | offsetBottom: 0               |\n\n## 注意事项\n\n- `v-sticky-header` 和 `v-sticky-footer` 已内置滚动条吸底功能，无需重复使用 `v-sticky-scroller` 指令\n- 当 `v-sticky-header` 和 `v-sticky-footer` 同时使用时，滚动条 `offsetBottom` 以 `v-sticky-footer` 为准\n- 横向滚动条默认显示方式为 `hover`，可通过设置修饰符 `.always` 改为一直显示\n- `v-height-adaptive` 指令不依赖于 `position: sticky` 属性，可单独使用\n\n## Project setup\n\n```bash\nyarn install\n# Compiles and hot-reloads for development\nyarn serve\n# Compiles and minifies for production\nyarn build\n# Compiles and minifies for production with demo\nyarn build:demo\n# Lints and fixes files\nyarn lint\n```\n\nCustomize configuration see [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flruihao%2Fel-table-sticky","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flruihao%2Fel-table-sticky","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flruihao%2Fel-table-sticky/lists"}