一个用于实现 Element UI (Vue 2) 表格的表头吸顶、表尾吸底、滚动条吸底以及高度自适应功能的指令集插件。
Element UI 的表格组件在使用时,如果表格内容过多,表格会出现滚动条,但是表头不会吸顶,表尾合计行也不会吸底,这样在表格内容过多时,表头和表尾合计行就会被遮挡,影响用户体验。
虽然可以通过设置 max-height
或者 height
属性来实现相同的效果,但是这个高度值只支持设置数字型,在实际开发中往往需要借助 JS 来计算,这样就会增加开发和维护成本。于是就有了这个插件。
部分指令依赖于 position: sticky
属性,所以只支持现代浏览器,在线示例。
- 支持表头吸顶 (v-sticky-header)
- 支持表尾合计行吸底 (v-sticky-footer)
- 支持横向滚动条吸底 (v-sticky-scroller)
- 支持高度自适应 (v-height-adaptive)
npm install @cell-x/el-table-sticky
全局注册指令:
import elTableSticky from '@cell-x/el-table-sticky'
Vue.use(elTableSticky)
// 或者
Vue.use(elTableSticky, {
StickyHeader: {
// 吸顶偏移量,可以是 CSS 支持的距离值,如 `0px`、`10%`、`calc(100vh - 1rem)` 等
offsetTop: 0,
},
StickyFooter: {
// 吸底偏移量,可以是 CSS 支持的距离值,如 `0px`、`10%`、`calc(100vh - 1rem)` 等
offsetBottom: 0,
},
HeightAdaptive: {
// 底部偏移量,只能是数字型
offsetBottom: 0,
}
})
局部注册指令:
import {
StickyHeader,
StickyFooter,
HeightAdaptive,
} from '@cell-x/el-table-sticky'
export default {
directives: {
StickyHeader: new StickyHeader({ offsetTop: 0 }).init(),
StickyFooter: new StickyFooter({ offsetBottom: 0 }).init(),
HeightAdaptive: new HeightAdaptive({ offsetBottom: 0 }).init(),
}
}
<el-table v-sticky-header>...</el-table>
<el-table v-sticky-footer>...</el-table>
<el-table v-sticky-scroller>...</el-table>
<el-table v-height-adaptive>...</el-table>
指令 | 说明 | 修饰符 | 类型 | 默认值 |
---|---|---|---|---|
v-sticky-header |
表头吸顶指令 | .always |
Object{Number, String} |
{ offsetTop: 0 } |
v-sticky-footer |
表尾合计行吸底指令 | .always |
Object{Number, String} |
{ offsetBottom: 0 } |
v-sticky-scroller |
横向滚动条吸底指令 | .always |
Object{Number, String} |
{ offsetBottom: 0 } |
v-height-adaptive |
高度自适应指令 | - | Object{Number} |
{ offsetBottom: 0 } |
v-sticky-header
和 v-sticky-footer
已内置滚动条吸底相同功能,无需重复使用 v-sticky-scroller
指令。
横向滚动条默认显示方式为 hover
,可通过设置修饰符为 .always
来修改为一直显示。
yarn install
# Compiles and hot-reloads for development
yarn serve
# Compiles and minifies for production
yarn build
# Compiles and minifies for production with demo
yarn build:demo
# Lints and fixes files
yarn lint
Customize configuration see Configuration Reference.