stk-table-vue 0.2.3 → 0.2.6

package/src/StkTable/StkTable.vue

@@ -61,7 +61,7 @@
                         :rowspan="virtualX_on ? 1 : col.rowSpan"
                         :colspan="col.colSpan"
                         :style="getCellStyle(1, col, rowIndex)"
-                        :title="col.title"
+                        :title="getHeaderTitle(col)"
                         :class="[
                             col.sorter ? 'sortable' : '',
                             col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
@@ -167,7 +167,7 @@
                     >
                         <component :is="col.customCell" v-if="col.customCell" :col="col" :row="row" :cell-value="row[col.dataIndex]" />
                         <div v-else class="table-cell-wrapper" :title="row[col.dataIndex]">
-                            {{ row[col.dataIndex] ?? emptyCellText }}
+                            {{ row[col.dataIndex] ?? getEmptyCellText(col, row) }}
                         </div>
                     </td>
                 </tr>
@@ -189,7 +189,7 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Row_Height } from './const';
 import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
@@ -200,7 +200,7 @@ import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useThDrag } from './useThDrag';
 import { useVirtualScroll } from './useVirtualScroll';
-import { howDeepTheHeader, tableSort } from './utils';
+import { getColWidth, getColWidthStr, howDeepTheHeader, tableSort } from './utils';
 
 /** Generic stands for DataType */
 type DT = any;
@@ -239,7 +239,7 @@ const props = withDefaults(
         /** 列唯一键 */
         colKey?: UniqKeyProp;
         /** 空值展示文字 */
-        emptyCellText?: string;
+        emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
         /** 暂无数据兜底高度是否撑满 */
         noDataFull?: boolean;
         /** 是否展示暂无数据 */
@@ -258,7 +258,7 @@ const props = withDefaults(
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
          */
-        rowClassName?: (row: any, i: number) => string;
+        rowClassName?: (row: DT, i: number) => string;
         /**
          * 列宽是否可拖动<br>
          * **不要设置**列minWidth，**必须**设置width<br>
@@ -287,6 +287,8 @@ const props = withDefaults(
         optimizeVue2Scroll?: boolean;
         /** 排序配置 */
         sortConfig?: SortConfig<DT>;
+        /** 隐藏头部title。可传入dataIndex数组 */
+        hideHeaderTitle?: boolean | string[];
     }>(),
     {
         width: '',
@@ -321,7 +323,9 @@ const props = withDefaults(
         optimizeVue2Scroll: false,
         sortConfig: () => ({
             emptyToBottom: false,
+            stringLocaleCompare: true,
         }),
+        hideHeaderTitle: false,
     },
 );
 
@@ -442,6 +446,15 @@ const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 /**高亮帧间隔 
 const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
 
+/** 空单元格占位字符 */
+const getEmptyCellText = computed(() => {
+    if (typeof props.emptyCellText === 'string') {
+        return () => props.emptyCellText;
+    } else {
+        return (col: StkTableColumn<DT>, row: DT) => (props.emptyCellText as any)({ row, col });
+    }
+});
+
 /** rowKey缓存 */
 const rowKeyGenStore = new WeakMap();
 
@@ -470,11 +483,11 @@ const {
     initVirtualScrollX,
     updateVirtualScrollY,
     updateVirtualScrollX,
-} = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
+} = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast, tableHeaders });
 
-const { getFixedStyle } = useFixedStyle({
+const { getFixedStyle } = useFixedStyle<DT>({
     props,
-    tableHeaderLast,
+    tableHeaders,
     virtualScroll,
     virtualScrollX,
     virtualX_on,
@@ -554,8 +567,8 @@ onMounted(() => {
 /** 处理默认排序 */
 function dealDefaultSorter() {
     if (!props.sortConfig.defaultSort) return;
-    const { dataIndex, order } = props.sortConfig.defaultSort;
-    setSorter(dataIndex as string, order);
+    const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+    setSorter(dataIndex as string, order, { force: false, silent });
 }
 
 /**
@@ -587,6 +600,7 @@ function dealColumns() {
         }
         /** 所有子节点数量 */
         let allChildrenLen = 0;
+        let allChildrenWidthSum = 0;
         arr.forEach(col => {
             // TODO: 继承父节点固定列配置
             // if (parentFixed) {
@@ -596,10 +610,15 @@ function dealColumns() {
             col.__PARENT__ = parent;
             /** 一列中的子节点数量 */
             let colChildrenLen = 1;
+            /** 多级表头的父节点宽度，通过叶子节点宽度计算得到 */
+            let colWidth = 0;
             if (col.children) {
                 // DFS
-                colChildrenLen = flat(col.children, col, depth + 1 /* , col.fixed */);
+                const [len, widthSum] = flat(col.children, col, depth + 1 /* , col.fixed */);
+                colChildrenLen = len;
+                colWidth = widthSum;
             } else {
+                colWidth = getColWidth(col);
                 tempHeaderLast.push(col); // 没有children的列作为colgroup
             }
             // 回溯
@@ -612,9 +631,14 @@ function dealColumns() {
             if (colSpan !== 1) {
                 col.colSpan = colSpan;
             }
+            if (!props.fixedMode && col.width === void 0) {
+                // 列赋值默认列宽。由于有些场景不需要设置width。
+                col.width = colWidth + 'px';
+            }
             allChildrenLen += colChildrenLen;
+            allChildrenWidthSum += colWidth;
         });
-        return allChildrenLen;
+        return [allChildrenLen, allChildrenWidthSum];
     }
 
     flat(copyColumn, null);
@@ -646,17 +670,17 @@ function colKeyGen(col: StkTableColumn<DT>) {
 
 /** 获取列宽度样式 */
 function getColWidthStyle(col: StkTableColumn<DT>) {
+    const width = getColWidthStr(col);
+    const minWidth = getColWidthStr(col, 'minWidth');
+    const maxWidth = getColWidthStr(col, 'maxWidth');
     const style: CSSProperties = {
-        width: col.width,
-        minWidth: col.minWidth,
-        maxWidth: col.maxWidth,
+        width,
+        minWidth: minWidth ?? width,
+        maxWidth: maxWidth ?? width,
     };
     if (props.colResizable) {
-        style.minWidth = col.width;
-        style.maxWidth = col.width;
-    } else {
-        style.minWidth = col.minWidth === void 0 ? col.width : col.minWidth;
-        style.maxWidth = col.maxWidth === void 0 ? col.width : col.maxWidth;
+        style.minWidth = width;
+        style.maxWidth = width;
     }
 
     return style;
@@ -686,6 +710,15 @@ function getCellStyle(tagType: 1 | 2, col: StkTableColumn<DT>, depth?: number):
     return style;
 }
 
+/** th title */
+function getHeaderTitle(col: StkTableColumn<DT>): string {
+    // 不展示title
+    if (props.hideHeaderTitle === true || (Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(col.dataIndex))) {
+        return '';
+    }
+    return col.title || '';
+}
+
 /**
  * 表头点击排序
  * @param click 是否为点击表头触发
@@ -832,11 +865,12 @@ function setCurrentRow(rowKey: string, option = { silent: false }) {
  * 设置表头排序状态
  * @param dataIndex 列字段
  * @param order 正序倒序
- * @param option.sortOption 指定排序参数
+ * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
+ * @param option.force 是否触发排序-默认true
  */
-function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; silent?: boolean; sort?: boolean } = {}) {
+function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
     sortCol.value = dataIndex;
     sortOrderIndex.value = sortSwitchOrder.indexOf(order);
@@ -844,7 +878,7 @@ function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortO
     if (newOption.sort && dataSourceCopy.value?.length) {
         // 如果表格有数据，则进行排序
         const column = newOption.sortOption || tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
-        if (column) onColumnSort(column, false, { force: true, emit: !newOption.silent });
+        if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else console.warn('Can not find column by dataIndex:', sortCol.value);
     }
     return dataSourceCopy.value;

package/src/StkTable/types/index.ts

@@ -77,9 +77,19 @@ export type UniqKeyProp = UniqKey | UniqKeyFun;
 export type SortConfig<T extends Record<string, any>> = {
     /** 空值始终排在列表末尾 */
     emptyToBottom?: boolean;
-    /** 默认排序（1.初始化时触发 2.排序方向为null时触发) */
+    /**
+     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
+     * 类似onMounted时，调用setSorter点了下表头。
+     */
     defaultSort?: {
         dataIndex: keyof T;
         order: Order;
+        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        silent?: boolean;
     };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (&$&应该false)
+     */
+    stringLocaleCompare?: boolean;
 };

package/src/StkTable/useFixedStyle.ts

@@ -4,9 +4,9 @@ import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 import { getColWidth } from './utils';
 
-type Options = {
+type Options<T extends Record<string, any>> = {
     props: any;
-    tableHeaderLast: Ref<StkTableColumn<any>[]>;
+    tableHeaders: Ref<StkTableColumn<T>[][]>;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
     virtualX_on: Ref<boolean>;
@@ -17,33 +17,52 @@ type Options = {
  * @param param0
  * @returns
  */
-export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }: Options) {
+export function useFixedStyle<DT extends Record<string, any>>({
+    props,
+    tableHeaders,
+    virtualScroll,
+    virtualScrollX,
+    virtualX_on,
+    virtualX_offsetRight,
+}: Options<DT>) {
     const fixedColumnsPositionStore = computed(() => {
-        const store: Record<string, number> = {};
-        const cols = [...tableHeaderLast.value];
-        let left = 0;
-        /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
-        let rightStartIndex = 0;
-        for (let i = 0; i < cols.length; i++) {
-            const item = cols[i];
-            if (item.fixed === 'left') {
-                store[item.dataIndex] = left;
-                left += getColWidth(item);
-            }
-            if (!rightStartIndex && item.fixed === 'right') {
-                rightStartIndex = i;
+        /** dataIndex 作为唯一标识 */
+        const colKeyStore: Record<string, number> = {};
+        /** 没有dataIndex 的多级表头列，使用对象引用做标识 */
+        const refStore = new WeakMap<StkTableColumn<DT>, number>();
+        tableHeaders.value.forEach(cols => {
+            let left = 0;
+            /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
+            let rightStartIndex = 0;
+            for (let i = 0; i < cols.length; i++) {
+                const item = cols[i];
+                if (item.fixed === 'left') {
+                    if (item.dataIndex) {
+                        colKeyStore[item.dataIndex] = left;
+                    } else {
+                        refStore.set(item, left);
+                    }
+                    left += getColWidth(item);
+                }
+                if (!rightStartIndex && item.fixed === 'right') {
+                    rightStartIndex = i;
+                }
             }
-        }
-        let right = 0;
-        for (let i = cols.length - 1; i >= rightStartIndex; i--) {
-            const item = cols[i];
-            if (item.fixed === 'right') {
-                store[item.dataIndex] = right;
-                right += getColWidth(item);
+            let right = 0;
+            for (let i = cols.length - 1; i >= rightStartIndex; i--) {
+                const item = cols[i];
+                if (item.fixed === 'right') {
+                    if (item.dataIndex) {
+                        colKeyStore[item.dataIndex] = right;
+                    } else {
+                        refStore.set(item, right);
+                    }
+                    right += getColWidth(item);
+                }
             }
-        }
+        });
 
-        return store;
+        return { refStore, colKeyStore };
     });
     /**
      * 固定列的style
@@ -52,9 +71,10 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
      * @param depth 深度。tagType = 1时使用
      */
     function getFixedStyle(tagType: 1 | 2, col: StkTableColumn<any>, depth = 0): CSSProperties {
-        const { fixed, dataIndex } = col;
+        const { fixed } = col;
         const isFixedLeft = fixed === 'left';
         const style: CSSProperties = {};
+        const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
         // TD
         if (Is_Legacy_Mode) {
             style.position = 'relative';
@@ -83,10 +103,11 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
                     style.right = `${virtualX_offsetRight.value}px`;
                 }
             } else {
+                const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + 'px';
                 if (isFixedLeft) {
-                    style.left = fixedColumnsPositionStore.value[dataIndex] + 'px';
+                    style.left = lr;
                 } else {
-                    style.right = fixedColumnsPositionStore.value[dataIndex] + 'px';
+                    style.right = lr;
                 }
             }
         }

package/src/StkTable/useHighlight.ts

@@ -30,9 +30,9 @@ export function useHighlight({ props, tableContainer }: Params) {
      */
     const highlightRowStore = ref<Record<UniqKey, HighlightRowStore>>({});
 
-    const highlightFrom = Highlight_Color[props.theme].from;
-    const highlightTo = Highlight_Color[props.theme].to;
-    const highlightInter = computed(() => interpolateRgb(highlightFrom, highlightTo));
+    const highlightFrom = computed(() => Highlight_Color[props.theme].from);
+    const highlightTo = computed(() => Highlight_Color[props.theme].to);
+    const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
 
     /** 存放高亮行的key*/
     const highlightDimRowKeys = new Set<UniqKey>();
@@ -76,6 +76,9 @@ export function useHighlight({ props, tableContainer }: Params) {
                     }
                 });
 
+                // $*$ 兼容vue2响应
+                highlightRowStore.value = { ...highlightRowStore.value };
+
                 if (highlightDimRowKeys.size > 0) {
                     // 还有高亮的行,则下一次循环
                     recursion();

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -44,11 +44,15 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
-        const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
+        const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
         const { scrollLeft } = virtualScrollX.value;
         const { headless, headerRowHeight } = props;
-        /**表头高度 */
+
+        // 这里不用virtualScroll 中的pageSize，因为我需要上一页的最后一条放在下一页的第一条
         const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+        /** 表体的page */
+        const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
+
         if (e.code === SCROLL_CODES[0]) {
             scrollTo(scrollTop - rowHeight, null);
         } else if (e.code === SCROLL_CODES[1]) {
@@ -58,9 +62,9 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         } else if (e.code === SCROLL_CODES[3]) {
             scrollTo(null, scrollLeft - rowHeight);
         } else if (e.code === SCROLL_CODES[4]) {
-            scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
         } else if (e.code === SCROLL_CODES[5]) {
-            scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
+            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
         }
     }
 

package/src/StkTable/useVirtualScroll.ts

@@ -4,10 +4,11 @@ import { StkTableColumn } from './types';
 import { getColWidth } from './utils';
 
 type Option<DT extends Record<string, any>> = {
-    tableContainer: Ref<HTMLElement | undefined>;
     props: any;
+    tableContainer: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: Ref<StkTableColumn<DT>[]>;
+    tableHeaders: Ref<StkTableColumn<DT>[][]>;
 };
 
 /** 暂存纵向虚拟滚动的数据 */
@@ -49,7 +50,13 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
  * @param param0
  * @returns
  */
-export function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast }: Option<DT>) {
+export function useVirtualScroll<DT extends Record<string, any>>({
+    props,
+    tableContainer,
+    dataSourceCopy,
+    tableHeaderLast,
+    tableHeaders,
+}: Option<DT>) {
     const virtualScroll = ref<VirtualScrollStore>({
         containerHeight: 0,
         rowHeight: props.rowHeight,
@@ -140,10 +147,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
         } else {
             containerHeight = offsetHeight || Default_Table_Height;
         }
-        Object.assign(virtualScroll.value, {
-            containerHeight,
-            pageSize: Math.ceil(containerHeight / rowHeight) + 1, // 这里最终+1，因为headless=true无头时，需要上下各预渲染一行。
-        });
+        const { headless, headerRowHeight } = props;
+        let pageSize = Math.ceil(containerHeight / rowHeight);
+        if (!headless) {
+            /** 表头高度占几行表体高度数 */
+            const headerToBodyRowHeightCount = Math.floor((tableHeaders.value.length * (headerRowHeight || rowHeight)) / rowHeight);
+            pageSize -= headerToBodyRowHeightCount; //减去表头行数
+        }
+        Object.assign(virtualScroll.value, { containerHeight, pageSize });
         updateVirtualScrollY(scrollTop);
     }
 
@@ -168,9 +179,30 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
         const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
-        const startIndex = Math.floor(sTop / rowHeight);
-        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
+        // 先更新滚动条位置记录，其他地方可能有依赖。(stripe 时ArrowUp/Down滚动依赖)
+        virtualScroll.value.scrollTop = sTop;
+        let startIndex = Math.floor(sTop / rowHeight);
+        if (props.stripe) {
+            startIndex -= 1; //预渲染1行
+        }
+        if (startIndex < 0) {
+            startIndex = 0;
+        }
+        if (props.stripe && startIndex !== 0) {
+            const scrollRows = Math.abs(oldStartIndex - startIndex);
+            // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
+            if (scrollRows < 2) {
+                return;
+            } else if (scrollRows % 2) {
+                startIndex -= 1; // 奇数-1变成偶数
+            }
+        }
         let endIndex = startIndex + pageSize;
+        if (props.stripe) {
+            // 由于上方预渲染一行，这里也要预渲染1+1行
+            endIndex += 2;
+        }
+        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
         if (endIndex > dataSourceCopy.value.length) {
             endIndex = dataSourceCopy.value.length; // 溢出index修正
         }
@@ -184,13 +216,12 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
             // 向上滚动
             Object.assign(virtualScroll.value, {
                 startIndex,
-                offsetTop,
                 endIndex,
-                scrollTop: sTop,
+                offsetTop,
             });
         } else {
             // vue2向下滚动优化
-            Object.assign(virtualScroll.value, { endIndex, scrollTop: sTop });
+            virtualScroll.value.endIndex = endIndex;
             vue2ScrollYTimeout = window.setTimeout(() => {
                 Object.assign(virtualScroll.value, { startIndex, offsetTop });
             }, VUE2_SCROLL_TIMEOUT_MS);