el table sticky

el-meja-lengket

Plug-in kumpulan perintah yang digunakan untuk mengimplementasikan plafon header tabel, plafon ekor tabel, plafon bawah bilah gulir, dan fungsi adaptif ketinggian tabel Elemen UI (Vue 2).

latar belakang

Ketika komponen tabel Elemen UI digunakan, jika ada terlalu banyak konten dalam tabel, bilah gulir akan muncul di tabel, tetapi header tabel tidak akan berpindah ke atas, dan total baris di akhir tabel akan tidak berpindah ke bawah. Dengan cara ini, ketika tabel berisi terlalu banyak konten, header tabel dan tabel tidak akan berpindah ke bawah. Total baris terakhir akan diblokir bagian bawah setiap kali Anda ingin menggulir. Rangkaian titik nyeri ini sangat memengaruhi pengalaman pengguna.

Solusi untuk Elemen UI : capai persyaratan di atas dengan mengatur atribut max-height atau height .

Kekurangan Elemen UI : nilai ketinggian hanya mendukung pengaturan nilai numerik, dan dalam pengembangan sebenarnya sering kali perlu menggunakan JS untuk menghitungnya.

Untuk mengatasi masalah/kebutuhan di atas dan mengurangi biaya pengembangan dan pemeliharaan, plugin ini dibuat. Silakan lihat analisis ide untuk detailnya.

ciri

Beberapa instruksi bergantung pada atribut position: sticky , jadi hanya mendukung browser modern, contoh online.

• Mendukung plafon header (v-sticky-header)
• Tabel pendukung total baris pengisapan bawah (v-sticky-footer)
• Mendukung pengisapan bawah bilah gulir horizontal (penggulung v-lengket)
• Dukungan tinggi adaptif (v-height-adaptif)

Memasang

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

Instruksi pendaftaran

Petunjuk pendaftaran global:

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

Petunjuk pendaftaran sebagian:

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

menggunakan

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

Parameter perintah

petunjuk	menjelaskan	pengubah	jenis	nilai bawaan
v-sticky-header	Perintah plafon header	.always	Object{Number, String}	offsetTop: 0, offsetBottom: 0
v-sticky-footer	Garis total di ujung tabel adalah perintah penghisapan paling bawah	.always	Object{Number, String}	offsetBawah: 0
v-sticky-scroller	Perintah bawah bilah gulir horizontal	.always	Object{Number, String}	offsetBawah: 0
v-height-adaptive	Instruksi yang sangat adaptif	-	Object{Number}	offsetBawah: 0

Hal-hal yang perlu diperhatikan

• v-sticky-header dan v-sticky-footer memiliki fungsi pengisap bilah gulir bawaan, tidak perlu menggunakan kembali perintah v-sticky-scroller
• Ketika v-sticky-header dan v-sticky-footer digunakan secara bersamaan, scroll bar offsetBottom didasarkan pada v-sticky-footer
• Mode tampilan default bilah gulir horizontal adalah hover , yang dapat diubah agar selalu ditampilkan dengan mengatur pengubah .always
• Direktif v-height-adaptive tidak bergantung pada atribut position: sticky dan dapat digunakan sendiri

Pengaturan proyek

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

Sesuaikan konfigurasi, lihat Referensi Konfigurasi.