หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

el-ตารางเหนียว

ปลั๊กอินชุดคำสั่งที่ใช้เพื่อปรับใช้เพดานส่วนหัวของตาราง เพดานส่วนท้ายของตาราง เพดานด้านล่างของแถบเลื่อน และฟังก์ชันการปรับความสูงของตาราง 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)

ติดตั้ง 

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} ออฟเซ็ตด้านล่าง: 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

ปรับแต่งการกำหนดค่า โปรดดู การอ้างอิงการกำหนดค่า

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด