소개
stk-table-vue (stk: sticky)는 sticky, vue, DOM 을 기반으로 한 고성능 가상 테이블입니다. 동적 데이터 표시 시나리오에 적합합니다.
stk-table-vue를 개발한 이유
이 컴포넌트를 만든 이유는 2022년경 웹에서 동적 데이터를 표시할 필요가 있었기 때문입니다. 당시 몇 가지 주류 테이블 컴포넌트를 조사했지만, 이 비즈니스 시나리오에 완벽하게 맞는 것을 찾지 못하여 직접 구현하기로 결정했습니다.
처음에는 기본적인 가상 리스트만 구현했습니다. 약 3년간의 개정을 거쳐 테이블로서의 기본 기능을 점차 갖추게 되었고, 오픈소스화하기로 결정했습니다.
주요 테이블을 조사한 후, 일반적인 방향을 확인했습니다:
성능 우선. 성능이 주요 목표입니다. 동적 데이터 표시에는 가능한 한 높은 성능이 필요하므로, 컴포넌트의 일부 사용 방법과 API 설계는 성능에 타협할 가능성이 있습니다.
패키지 크기 제어. 가능한 한 소수이고 간단한 방법으로 테이블 기능을 구현합니다.
DOM 기반. DOM 기반으로 함으로써 Vue 컴포넌트 라이브러리와 원활한 통합이 용이합니다. 또한 DOM 성능에는 큰 자신이 있습니다. 다양한 비용을 고려한 결과, Canvas 구현을 포기했습니다.
CSS sticky를 사용한 고정 열과 헤더. 이 방법은 헤더와 열을 다른 테이블로 덮어야 했던 기존 방법과 비교하여 코드량을 크게 절감합니다. 우연히 고정 열에도 sticky를 구현할 수 있었고, 완전히 새로운 인터랙션을 구현했습니다. 시도해보기.
선언형 커스텀 슬롯.
ant-design-vue테이블의 커스텀 셀 접근 방식을 차용했습니다.<template>의#slot으로 커스텀 셀을 사용하는 것보다 훨씬 우아합니다.내장 강조. 애니메이션 API를 사용하여 강조 애니메이션을 구현하고, 서드파티 라이브러리 의존성을 제거합니다.
table 태그 사용. 일부 컴포넌트는 성능을 향상시키기 위해
div로 테이블을 렌더링합니다. 그러나 기본<table>기능 (레이아웃, 복사, 인쇄 등)을 구현하려면 많은 추가 코드가 필요하며, 패키지 크기 제어에 불리합니다. 성능 면에서는 주관적으로 div와 table 구현 간에 큰 차이는 없습니다.
stk-table-vue의 커스터마이징
많은 기본 테이블 기능이 완전하지 않을 수 있지만, 2차 개발을 위한 여지는 충분하며 일부 기능은 직접 구현할 수 있습니다.
예를 들어, 헤더 클릭
필터기능.필터기능과 관련하여, 실제 개발에서는 프로젝트마다 다른 컴포넌트 라이브러리와 스타일을 사용하기 때문에 내장 필터 기능을 제공하면: 1. 전체 스타일에 영향을 미칠 수 있고; 2. 패키지 크기 제어에 부정적인 영향을 미칠 수 있습니다. 따라서 아직 구현되지 않았습니다.v1.0.0에는 사용자가 필요에 따라 가져올 수 있는 FilterCell 컴포넌트가 내장되어 있습니다.정렬에서 개별 화살표를 클릭할 수 없습니다.
사용자 정의 헤더 셀을 통해 구현할 수도 있습니다.
스타일은
.stk-table선택자 아래의 CSS 변수를 통해 변경할 수 있습니다.
거인의 어깨 위에
컴포넌트의 일부 디자인과 API는 vxe-table, ant-design-vue, navie-ui 등의 훌륭한 프로젝트를 참고했습니다. 이 자리를 빌려 감사의 말씀을 전합니다.