el table sticky

el-table-sticky

一個用於實現Element UI (Vue 2) 表格的表頭吸頂、表尾吸底、滾動條吸底以及高度自適應功能的指令集插件。

背景

Element UI 的表格組件在使用時，如果表格內容過多，表格會出現滾動條，但是表頭不會吸頂，表尾合計行也不會吸底，這樣在表格內容過多時，表頭和表尾合計行就會被遮擋，如果有橫向滾動條，每次想滾動必須滑動到最底下，這一系列痛點，非常影響用戶體驗。

Element UI 的解決辦法：通過設置max-height或者height屬性來實現上述需求。

Element UI 的解決不足點：高度值只支持設置數字型，在實際開發中往往需要藉助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 ,
    // 滚动条吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyFooter : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyScroller : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  HeightAdaptive : {
    // 底部偏移量，只能是数字型
    offsetBottom : 0 ,
  }
} )

局部註冊指令：

 import {
  StickyHeader ,
  StickyFooter ,
  StickyScroller ,
  HeightAdaptive ,
} from '@cell-x/el-table-sticky'

export default {
  directives : {
    StickyHeader : new StickyHeader ( { offsetTop : 0 , offsetBottom : 0 } ) . init ( ) ,
    StickyFooter : new StickyFooter ( { offsetBottom : 0 } ) . init ( ) ,
    StickyScroller : new StickyScroller ( { 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, offsetBottom: 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指令
• 當v-sticky-header和v-sticky-footer同時使用時，滾動條offsetBottom以v-sticky-footer為準
• 橫向滾動條默認顯示方式為hover ，可通過設置修飾符.always改為一直顯示
• v-height-adaptive指令不依賴於position: sticky屬性，可單獨使用

Project setup

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.