stk-table-vue 0.2.2 → 0.2.5

package/package.json

@@ -1,61 +1,61 @@
-{
-    "name": "stk-table-vue",
-    "version": "0.2.2",
-    "description": "Simple realtime virtual table for vue3&vue2.7",
-    "main": "./lib/stk-table-vue.js",
-    "types": "./lib/StkTable/index.d.ts",
-    "packageManager": "pnpm@8.14.3",
-    "directories": {
-        "test": "test"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "test": "vitest"
-    },
-    "keywords": [
-        "virtual table",
-        "vue",
-        "highlight",
-        "sticky"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://gitee.com/japlus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/node": "^20.11.14",
-        "@typescript-eslint/eslint-plugin": "^6.14.0",
-        "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-vue": "^5.0.3",
-        "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "@vue/test-utils": "2.4.4",
-        "eslint": "^8.55.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^7.1.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "eslint-plugin-vue": "^9.19.2",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "postcss-discard-comments": "^6.0.1",
-        "postcss-preset-env": "^9.3.0",
-        "prettier": "^3.1.1",
-        "typescript": "^5.3.3",
-        "vite": "^5.0.12",
-        "vite-plugin-dts": "^3.6.4",
-        "vitest": "^1.1.0",
-        "vue": "^3.3.9",
-        "vue-eslint-parser": "^9.3.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+{
+    "name": "stk-table-vue",
+    "version": "0.2.5",
+    "description": "Simple realtime virtual table for vue3&vue2.7",
+    "main": "./lib/stk-table-vue.js",
+    "types": "./lib/StkTable/index.d.ts",
+    "packageManager": "pnpm@8.14.3",
+    "directories": {
+        "test": "test"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "vitest"
+    },
+    "keywords": [
+        "virtual table",
+        "vue",
+        "highlight",
+        "sticky"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "author": "japlus",
+    "repository": {
+        "type": "git",
+        "url": "https://gitee.com/japlus/stk-table-vue"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/node": "^20.11.14",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-vue": "^5.0.3",
+        "@vitejs/plugin-vue-jsx": "^3.1.0",
+        "@vue/test-utils": "2.4.4",
+        "eslint": "^8.55.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-html": "^7.1.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-plugin-vue": "^9.19.2",
+        "happy-dom": "^12.10.3",
+        "less": "^4.2.0",
+        "postcss-discard-comments": "^6.0.1",
+        "postcss-preset-env": "^9.3.0",
+        "prettier": "^3.1.1",
+        "typescript": "^5.3.3",
+        "vite": "^5.1.4",
+        "vite-plugin-dts": "^3.7.3",
+        "vitest": "^1.1.0",
+        "vue": "^3.4.19",
+        "vue-eslint-parser": "^9.3.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

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],
@@ -148,7 +148,7 @@
                         [rowClassName(row, i)]: true,
                     }"
                     :style="{
-                        backgroundColor: row._bgc,
+                        backgroundColor: highlightRowStore[rowKeyGen(row)]?.bgc,
                     }"
                     @click="e => onRowClick(e, row)"
                     @dblclick="e => onRowDblclick(e, row)"
@@ -191,7 +191,7 @@
  */
 import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Row_Height } from './const';
-import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -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;
@@ -235,11 +235,11 @@ const props = withDefaults(
         /** 表格数据源 */
         dataSource?: DT[];
         /** 行唯一键 */
-        rowKey?: UniqKey;
+        rowKey?: UniqKeyProp;
         /** 列唯一键 */
-        colKey?: UniqKey;
+        colKey?: UniqKeyProp;
         /** 空值展示文字 */
-        emptyCellText?: string;
+        emptyCellText?: string; //TODO: 支持传入方法
         /** 暂无数据兜底高度是否撑满 */
         noDataFull?: boolean;
         /** 是否展示暂无数据 */
@@ -286,7 +286,9 @@ const props = withDefaults(
         /** 优化vue2 滚动 */
         optimizeVue2Scroll?: boolean;
         /** 排序配置 */
-        sortConfig?: SortConfig;
+        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,
     },
 );
 
@@ -330,7 +334,7 @@ const emits = defineEmits<{
      * 排序变更触发
      * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
      */
-    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig): void;
+    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig<DT>): void;
     /**
      * 一行点击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -470,11 +474,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,
@@ -484,7 +488,7 @@ const { getFixedStyle } = useFixedStyle({
 /**
  * 高亮行，高亮单元格
  */
-const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
+const { highlightRowStore, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
 
 if (props.autoResize) {
     useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
@@ -548,8 +552,16 @@ watch(() => props.fixedColShadow, dealFixedColShadow);
 onMounted(() => {
     initVirtualScroll();
     updateFixedShadow();
+    dealDefaultSorter();
 });
 
+/** 处理默认排序 */
+function dealDefaultSorter() {
+    if (!props.sortConfig.defaultSort) return;
+    const { dataIndex, order } = props.sortConfig.defaultSort;
+    setSorter(dataIndex as string, order);
+}
+
 /**
  * 处理多级表头
  */
@@ -559,7 +571,7 @@ function dealColumns() {
     tableHeaderLast.value = [];
     const copyColumn = props.columns; // do not deep clone
     const deep = howDeepTheHeader(copyColumn);
-    const tempHeaderLast: StkTableColumn<any>[] = [];
+    const tempHeaderLast: StkTableColumn<DT>[] = [];
 
     if (deep > 1 && props.virtualX) {
         console.error('多级表头不支持横向虚拟滚动');
@@ -579,6 +591,7 @@ function dealColumns() {
         }
         /** 所有子节点数量 */
         let allChildrenLen = 0;
+        let allChildrenWidthSum = 0;
         arr.forEach(col => {
             // TODO: 继承父节点固定列配置
             // if (parentFixed) {
@@ -588,10 +601,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
             }
             // 回溯
@@ -604,9 +622,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);
@@ -637,18 +660,18 @@ function colKeyGen(col: StkTableColumn<DT>) {
 }
 
 /** 获取列宽度样式 */
-function getColWidthStyle(col: StkTableColumn<any>) {
+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;
@@ -662,7 +685,7 @@ function getColWidthStyle(col: StkTableColumn<any>) {
  * @param col
  * @param depth 表头层级
  */
-function getCellStyle(tagType: 1 | 2, col: StkTableColumn<any>, depth?: number): CSSProperties {
+function getCellStyle(tagType: 1 | 2, col: StkTableColumn<DT>, depth?: number): CSSProperties {
     const style: CSSProperties = {
         ...getColWidthStyle(col),
         ...getFixedStyle(tagType, col, depth),
@@ -678,12 +701,22 @@ function getCellStyle(tagType: 1 | 2, col: StkTableColumn<any>, 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 {boolean} options.force sort-remote 开启后是否强制排序
- * @param {boolean} options.emit 是否触发回调
+ * @param click 是否为点击表头触发
+ * @param options.force sort-remote 开启后是否强制排序
+ * @param options.emit 是否触发回调
  */
-function onColumnSort(col?: StkTableColumn<any>, click = true, options: { force?: boolean; emit?: boolean } = {}) {
+function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?: boolean; emit?: boolean } = {}) {
     if (!col?.sorter) return;
     options = { force: false, emit: false, ...options };
     if (sortCol.value !== col.dataIndex) {
@@ -694,8 +727,16 @@ function onColumnSort(col?: StkTableColumn<any>, click = true, options: { force?
     if (click) sortOrderIndex.value++;
     sortOrderIndex.value = sortOrderIndex.value % 3;
 
-    const order = sortSwitchOrder[sortOrderIndex.value];
+    let order = sortSwitchOrder[sortOrderIndex.value];
     const sortConfig = props.sortConfig;
+    const defaultSort = sortConfig.defaultSort;
+
+    if (!order && defaultSort) {
+        // 没有排序时变成默认排序
+        order = defaultSort.order;
+        sortOrderIndex.value = sortSwitchOrder.indexOf(order);
+        sortCol.value = defaultSort.dataIndex as string;
+    }
     if (!props.sortRemote || options.force) {
         dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
     }
@@ -813,16 +854,16 @@ function setCurrentRow(rowKey: string, option = { silent: false }) {
 
 /**
  * 设置表头排序状态
- * @param {string} dataIndex 列字段
- * @param {'asc'|'desc'|null} order
- * @param {object} option.sortOption 指定排序参数
- * @param {boolean} option.sort 是否触发排序
- * @param {boolean} option.silent 是否触发回调
+ * @param dataIndex 列字段
+ * @param order 正序倒序
+ * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
+ * @param option.sort 是否触发排序-默认true
+ * @param option.silent 是否禁止触发回调-默认true
  */
-function setSorter(dataIndex: string, order: null | 'asc' | 'desc', option: { sortOption?: SortOption; silent?: boolean; sort?: boolean } = {}) {
+function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
     sortCol.value = dataIndex;
-    sortOrderIndex.value = sortSwitchOrder.findIndex(it => it === order);
+    sortOrderIndex.value = sortSwitchOrder.indexOf(order);
 
     if (newOption.sort && dataSourceCopy.value?.length) {
         // 如果表格有数据，则进行排序

package/src/StkTable/types/index.ts

@@ -59,18 +59,32 @@ export type StkTableColumn<T extends Record<string, any>> = {
     __PARENT__?: StkTableColumn<T> | null;
 };
 
-export type SortOption = Pick<StkTableColumn<any>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
+export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
 
+/** 排序状态 */
 export type SortState<T> = {
     dataIndex: T;
     order: null | 'asc' | 'desc';
     sortType?: 'number' | 'string';
 };
 
-export type UniqKey = string | ((param: any) => string);
+/** 唯一键 */
+export type UniqKey = string | number;
+export type UniqKeyFun = (param: any) => UniqKey;
+export type UniqKeyProp = UniqKey | UniqKeyFun;
 
 /** 排序配置 */
-export type SortConfig = {
+export type SortConfig<T extends Record<string, any>> = {
     /** 空值始终排在列表末尾 */
     emptyToBottom?: boolean;
+    /** 默认排序（1.初始化时触发 2.排序方向为null时触发) */
+    defaultSort?: {
+        dataIndex: keyof T;
+        order: Order;
+    };
+    /**
+     * 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;
                 }
             }
         }