el table sticky

الجدول لزجة

مكون إضافي لمجموعة الأوامر يُستخدم لتنفيذ سقف رأس الجدول، وسقف ذيل الجدول، والسقف السفلي لشريط التمرير، ووظائف التكيف مع الارتفاع لجداول Element UI (Vue 2).

خلفية

عند استخدام مكون الجدول الخاص بـ Element UI، إذا كان هناك الكثير من المحتوى في الجدول، فستظهر أشرطة التمرير على الجدول، ولكن لن يتحرك رأس الجدول إلى الأعلى، وسيظهر إجمالي الصفوف في نهاية الجدول لا ينتقل إلى الأسفل بهذه الطريقة، عندما يحتوي الجدول على قدر كبير جدًا من المحتوى، فلن ينتقل رأس الجدول والجدول إلى الأسفل الجزء السفلي في كل مرة تريد فيها التمرير، تؤثر هذه السلسلة من نقاط الألم بشكل كبير على تجربة المستخدم.

حل عنصر واجهة المستخدم : تحقيق المتطلبات المذكورة أعلاه عن طريق تعيين سمة max-height أو height .

عيوب عنصر واجهة المستخدم : قيمة الارتفاع تدعم فقط تحديد القيم الرقمية، وفي التطوير الفعلي غالبًا ما يكون من الضروري استخدام JS لحسابها.

من أجل حل المشاكل/الاحتياجات المذكورة أعلاه وتقليل تكاليف التطوير والصيانة، تم إنشاء هذا البرنامج الإضافي، يرجى الاطلاع على تحليل الفكرة للحصول على التفاصيل.

مميزة

تعتمد بعض التعليمات على position: sticky ، لذلك تدعم المتصفحات الحديثة فقط، والأمثلة عبر الإنترنت.

• دعم سقف الرأس (رأس v مثبت)
• ذيل طاولة الدعم، إجمالي الصف السفلي، مص (v-sticky-footer)
• دعم الامتصاص السفلي لشريط التمرير الأفقي (v-sticky-scroller)
• دعم التكيف مع الارتفاع (v-الارتفاع التكيفي)

ثَبَّتَ

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}	أوفستتوب: 0، أوفستتوب: 0
v-sticky-footer	السطر الإجمالي في نهاية الجدول هو أمر الامتصاص السفلي	.always	Object{Number, String}	الإزاحة السفلية: 0
v-sticky-scroller	الأمر السفلي لشريط التمرير الأفقي	.always	Object{Number, String}	الإزاحة السفلية: 0
v-height-adaptive	تعليمات عالية التكيف	-	Object{Number}	الإزاحة السفلية: 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 ويمكن استخدامه بمفرده

إعداد المشروع

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

تخصيص التكوين راجع مرجع التكوين.