el table sticky

el-table-sticky

Ein Befehlssatz-Plug-in, das zur Implementierung der Tabellenkopfobergrenze, der Tabellenendeobergrenze, der unteren Obergrenze der Bildlaufleiste und der höhenadaptiven Funktionen von Element UI-Tabellen (Vue 2) verwendet wird.

Hintergrund

Wenn die Tabellenkomponente von Element UI verwendet wird und zu viel Inhalt in der Tabelle vorhanden ist, werden Bildlaufleisten in der Tabelle angezeigt, aber der Tabellenkopf wird nicht nach oben verschoben, und die Gesamtzeilen am Ende der Tabelle werden angezeigt Wenn die Tabelle zu viel Inhalt enthält, werden die Tabellenüberschrift und die letzte Zeile nicht nach unten verschoben. Wenn eine horizontale Bildlaufleiste vorhanden ist, müssen Sie sie verschieben Jedes Mal, wenn Sie scrollen möchten, erscheint eine Reihe von Schwachstellen, die sich stark auf die Benutzererfahrung auswirken.

Lösung für die Element-Benutzeroberfläche : Erfüllen Sie die oben genannten Anforderungen, indem Sie das Attribut max-height oder height festlegen.

Mängel der Element-Benutzeroberfläche : Der Höhenwert unterstützt nur das Festlegen numerischer Werte, und in der tatsächlichen Entwicklung ist es häufig erforderlich, JS zu seiner Berechnung zu verwenden.

Um die oben genannten Probleme/Anforderungen zu lösen und die Entwicklungs- und Wartungskosten zu senken, wurde dieses Plug-in erstellt. Einzelheiten finden Sie in der Ideenanalyse.

Merkmal

Einige Anweisungen basieren auf position: sticky “ und unterstützen daher nur moderne Browser und Online-Beispiele.

• Stützkopfdecke (V-Sticky-Header)
• Unterstützen Sie das Ende der gesamten Reihe am Boden des Tisches und saugen Sie es (V-Sticky-Footer).
• Unterstützen Sie das Ansaugen der horizontalen Bildlaufleiste an der Unterseite (V-Sticky-Scroller).
• Stützhöhenadaptiv (v-höhenadaptiv)

Installieren

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

Registrierungsanweisungen

Anweisungen zur globalen Registrierung:

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

Anweisungen zur Teilregistrierung:

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

verwenden

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

Befehlsparameter

Anweisung	veranschaulichen	Modifikator	Typ	Standardwert
v-sticky-header	Befehl „Kopfzeilendecke“.	.always	Object{Number, String}	offsetTop: 0, offsetBottom: 0
v-sticky-footer	Die Summenzeile am Ende der Tabelle ist der unterste Saugbefehl	.always	Object{Number, String}	offsetBottom: 0
v-sticky-scroller	Befehl für die horizontale Bildlaufleiste unten	.always	Object{Number, String}	offsetBottom: 0
v-height-adaptive	Hochadaptive Anweisungen	-	Object{Number}	offsetBottom: 0

Dinge zu beachten

• v-sticky-header und v-sticky-footer verfügen über eine integrierte Bildlaufleisten-Saugfunktion, sodass der Befehl v-sticky-scroller nicht erneut verwendet werden muss
• Wenn v-sticky-header und v-sticky-footer gleichzeitig verwendet werden, basiert der offsetBottom der Bildlaufleiste auf v-sticky-footer
• Der Standardanzeigemodus der horizontalen Bildlaufleiste ist hover , der durch Festlegen des Modifikators „ .always “ so geändert werden kann, dass er immer angezeigt wird
• Die v-height-adaptive Direktive hängt nicht vom position: sticky -Attribut ab und kann allein verwendet werden

Projektaufbau

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

Passen Sie die Konfiguration an, siehe Konfigurationsreferenz.