stk-table-vue 0.2.8 → 0.3.0

package/src/StkTable/useVirtualScroll.ts

@@ -1,14 +1,14 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
-import { Default_Table_Height, Default_Table_Width } from './const';
+import { DEFAULT_TABLE_HEIGHT, DEFAULT_TABLE_WIDTH } from './const';
 import { StkTableColumn } from './types';
-import { getColWidth } from './utils';
+import { getCalculatedColWidth } from './utils';
 
 type Option<DT extends Record<string, any>> = {
     props: any;
-    tableContainer: Ref<HTMLElement | undefined>;
+    tableContainerRef: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
-    tableHeaderLast: Ref<StkTableColumn<DT>[]>;
-    tableHeaders: Ref<StkTableColumn<DT>[][]>;
+    tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
+    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
 };
 
 /** 暂存纵向虚拟滚动的数据 */
@@ -52,7 +52,7 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
  */
 export function useVirtualScroll<DT extends Record<string, any>>({
     props,
-    tableContainer,
+    tableContainerRef,
     dataSourceCopy,
     tableHeaderLast,
     tableHeaders,
@@ -93,7 +93,10 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     });
 
     const virtualX_on = computed(() => {
-        return props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getColWidth(col)), 0) > virtualScrollX.value.containerWidth + 100;
+        return (
+            props.virtualX &&
+            tableHeaderLast.value.reduce((sum, col) => (sum += getCalculatedColWidth(col)), 0) > virtualScrollX.value.containerWidth + 100
+        );
     });
 
     const virtualX_columnPart = computed(() => {
@@ -126,7 +129,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
             const col = tableHeaderLast.value[i];
             if (col.fixed !== 'right') {
-                width += getColWidth(col);
+                width += getCalculatedColWidth(col);
             }
         }
         return width;
@@ -138,14 +141,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({
      */
     function initVirtualScrollY(height?: number) {
         if (!virtual_on.value) return;
-        const { offsetHeight, scrollTop } = tableContainer.value || {};
+        const { offsetHeight, scrollTop } = tableContainerRef.value || {};
         const { rowHeight } = virtualScroll.value;
         let containerHeight: number;
         // FIXME: 可能多次获取offsetHeight 会导致浏览器频繁重排
         if (typeof height === 'number') {
             containerHeight = height;
         } else {
-            containerHeight = offsetHeight || Default_Table_Height;
+            containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
         }
         const { headless, headerRowHeight } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -160,9 +163,9 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     function initVirtualScrollX() {
         if (!props.virtualX) return;
-        const { offsetWidth, scrollLeft } = tableContainer.value || {};
+        const { offsetWidth, scrollLeft } = tableContainerRef.value || {};
         // scrollTo(null, 0);
-        virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+        virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
         updateVirtualScrollX(scrollLeft);
     }
     /**
@@ -239,12 +242,16 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         let offsetLeft = 0;
 
         let colWidthSum = 0;
+        let leftColWidthSum = 0;
         for (let colIndex = 0; colIndex < headerLength; colIndex++) {
             startIndex++;
             const col = tableHeaderLast.value[colIndex];
+            const colWidth = getCalculatedColWidth(col);
             // fixed left 不进入计算列宽
-            if (col.fixed === 'left') continue;
-            const colWidth = getColWidth(col);
+            if (col.fixed === 'left') {
+                leftColWidthSum += colWidth;
+                continue;
+            }
             colWidthSum += colWidth;
             // 列宽（非固定列）加到超过scrollLeft的时候，表示startIndex从上一个开始下标
             if (colWidthSum >= sLeft) {
@@ -255,13 +262,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
         // -----
         colWidthSum = 0;
+        const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
         let endIndex = headerLength;
         for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
             const col = tableHeaderLast.value[colIndex];
-            colWidthSum += getColWidth(col);
+            colWidthSum += getCalculatedColWidth(col);
             // 列宽大于容器宽度则停止
-            if (colWidthSum >= virtualScrollX.value.containerWidth) {
-                endIndex = colIndex + 1; // TODO:预渲染的列数
+            if (colWidthSum >= containerWidth) {
+                endIndex = colIndex + 1; // 由于slice[start,end)，要加1
                 break;
             }
         }

package/src/StkTable/utils.ts

@@ -1,4 +1,4 @@
-import { Default_Col_Width } from './const';
+import { DEFAULT_COL_WIDTH, STK_ID_PREFIX } from './const';
 import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types';
 
 /** 是否空值 */
@@ -182,20 +182,38 @@ export function howDeepTheHeader(arr: StkTableColumn<any>[], level = 1) {
     return Math.max(...levels);
 }
 
-/** 获取列宽 */
+/**
+ * 获取列宽
+ *
+ * 关于列宽的操作往往在横向滚动中使用。既然已经有横向滚动了，则列宽会被压缩至minWidth，所以优先取minWidth
+ */
 export function getColWidth(col: StkTableColumn<any> | null): number {
-    const val = col?.width ?? Default_Col_Width;
+    const val = col?.minWidth ?? col?.width ?? DEFAULT_COL_WIDTH;
     if (typeof val === 'number') {
         return Math.floor(val);
     }
     return parseInt(val);
 }
 
-/** 获取列宽配置。用于支持列宽配置数字 */
-export function getColWidthStr(col: StkTableColumn<any> | null | undefined, key: 'width' | 'minWidth' | 'maxWidth' = 'width') {
-    const val = col?.[key];
-    if (typeof val === 'number') {
-        return val + 'px';
+/** 获取计算后的宽度 */
+export function getCalculatedColWidth(col: StkTableColumn<any> | null) {
+    return col?.__WIDTH__ ?? +DEFAULT_COL_WIDTH;
+}
+
+/** number列宽+px */
+export function transformWidthToStr(width?: string | number) {
+    if (typeof width === 'number') {
+        return width + 'px';
     }
-    return val;
+    return width;
+}
+
+/** 创建组件唯一标识 */
+export function createStkTableId() {
+    if (!window.__STK_TB_ID_COUNT__) {
+        window.__STK_TB_ID_COUNT__ = 0;
+    }
+    window.__STK_TB_ID_COUNT__ += 1;
+
+    return STK_ID_PREFIX + window.__STK_TB_ID_COUNT__.toString(36);
 }

package/src/vite-env.d.ts

@@ -4,3 +4,7 @@ declare module '*.vue' {
     const component: DefineComponent<object, object, any>;
     export default component;
 }
+
+interface Window {
+    __STK_TB_ID_COUNT__: number;
+}