el table sticky

엘테이블스티키

Element UI(Vue 2) 테이블의 테이블 헤더 천장, 테이블 테일 천장, 스크롤 바 하단 천장, 높이 적응 기능을 구현하는 데 사용되는 명령 세트 플러그인입니다.

배경

Element UI의 테이블 컴포넌트를 사용할 때, 테이블에 내용이 너무 많으면 테이블에 스크롤바가 나타나는데, 테이블 헤더가 위로 이동하지 않고, 테이블 끝에 있는 전체 행이 테이블에 표시됩니다. 이렇게 하면 테이블에 내용이 너무 많으면 테이블 머리글과 테이블이 아래쪽으로 이동하지 않습니다. 스크롤할 때마다 하단에 표시됩니다. 이 일련의 문제점은 사용자 경험에 큰 영향을 미칩니다.

요소 UI에 대한 솔루션 : max-height 또는 height 속성을 설정하여 위 요구 사항을 달성합니다.

Element UI의 단점 : height 값은 숫자값 설정만 지원하고, 실제 개발에서는 JS를 사용하여 계산해야 하는 경우가 많습니다.

위의 문제점/요구 사항을 해결하고 개발 및 유지 관리 비용을 줄이기 위해 이 플러그인이 만들어졌습니다. 자세한 내용은 아이디어 분석을 참조하세요.

특성

일부 지침은 position: sticky 속성에 의존하므로 최신 브라우저, 온라인 예제만 지원합니다.

• 헤더 한도 지원(v-sticky-header)
• 지지대 꼬리 전체 행 바닥 흡입(v-sticky-footer)
• 수평 스크롤바 하단 흡입 지원(v-sticky-scroller)
• 높이 적응 지원(v-height-adaptive)

설치하다

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 이며, modifier .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

구성을 사용자 정의하려면 구성 참조를 참조하세요.