el table sticky

el-table-sticky

Un plug-in d'ensemble de commandes utilisé pour implémenter le plafond d'en-tête de table, le plafond de queue de table, le plafond inférieur de la barre de défilement et les fonctions d'adaptation en hauteur des tables Element UI (Vue 2).

arrière-plan

Lorsque le composant tableau d'Element UI est utilisé, s'il y a trop de contenu dans le tableau, des barres de défilement apparaîtront sur le tableau, mais l'en-tête du tableau ne se déplacera pas vers le haut et le total des lignes à la fin du tableau sera ne se déplace pas vers le bas. De cette façon, lorsque le tableau contient trop de contenu, l'en-tête du tableau et le tableau ne se déplaceront pas vers le bas. La dernière ligne totale sera bloquée. S'il y a une barre de défilement horizontale, vous devez glisser vers le bas. vers le bas à chaque fois que vous souhaitez faire défiler. Cette série de problèmes affecte grandement l'expérience utilisateur.

Solution à Element UI : répondez aux exigences ci-dessus en définissant l'attribut max-height ou height .

Inconvénients d'Element UI : la valeur de hauteur ne prend en charge que la définition de valeurs numériques, et dans le développement réel, il est souvent nécessaire d'utiliser JS pour la calculer.

Afin de résoudre les problèmes/besoins ci-dessus et de réduire les coûts de développement et de maintenance, ce plug-in a été créé. Veuillez consulter l'analyse des idées pour plus de détails.

caractéristiques

Certaines instructions dépendent de position: sticky , donc ne prennent en charge que les navigateurs modernes, les exemples en ligne.

• Plafond de support (v-sticky-header)
• Support table queue totale rangée bas aspiration (v-sticky-footer)
• Prise en charge de l'aspiration inférieure de la barre de défilement horizontale (v-sticky-scroller)
• Adaptatif à la hauteur du support (adaptatif à la hauteur en V)

Installer

npm install @cell-x/el-table-sticky

Instructions d'inscription

Instructions d'inscription globales :

 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 ,
  }
} )

Instructions d'inscription partielle :

 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 ( ) ,
  }
} 

utiliser

 < 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 > 

Paramètres de commande

instruction	illustrer	modificateur	taper	valeur par défaut
v-sticky-header	Commande de plafond de tête	.always	Object{Number, String}	offsetTop : 0, offsetBottom : 0
v-sticky-footer	La ligne totale à la fin du tableau est la commande d'aspiration du bas	.always	Object{Number, String}	offsetBas : 0
v-sticky-scroller	Commande inférieure de la barre de défilement horizontale	.always	Object{Number, String}	offsetBas : 0
v-height-adaptive	Instructions hautement adaptatives	-	Object{Number}	offsetBas : 0

Choses à noter

• v-sticky-header et v-sticky-footer ont une fonction d'aspiration de barre de défilement intégrée, pas besoin de réutiliser la commande v-sticky-scroller
• Lorsque v-sticky-header et v-sticky-footer sont utilisés en même temps, la barre de défilement offsetBottom est basée sur v-sticky-footer
• Le mode d'affichage par défaut de la barre de défilement horizontale est hover , qui peut être modifié pour toujours afficher en définissant le modificateur .always
• La directive v-height-adaptive ne dépend pas de position: sticky et peut être utilisée seule

Configuration du projet

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

Personnaliser la configuration, voir Référence de configuration.