소개
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의 커스터마이징
很多基本表格功能可能没有覆盖，但二次开发的余地是足够的，一些功能可以自己实现。
例如，头部点击的
筛选功能。关于
筛选功能，考虑到实际开发中不同项目使用不同组件库和样式，提供内置筛选功能可能会：1. 影响整体样式；2. 对包大小控制不利。因此，尚未实现。排序不能点击单个箭头。
这也可以通过自定义头部单元格来实现。
样式可以通过
.stk-table选择器下的 CSS 变量来更改。
##站在巨人的肩膀上 组件的部分设计和API参考了 vxe-table、ant-design-vue、navie-ui 等优秀项目。在此表示感谢。