stk-table-vue 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.2.1",
+    "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",

package/src/StkTable/StkTable.vue

@@ -191,7 +191,7 @@
  */
 import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Row_Height } from './const';
-import { Order, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -285,6 +285,8 @@ const props = withDefaults(
         fixedColShadow?: boolean;
         /** 优化vue2 滚动 */
         optimizeVue2Scroll?: boolean;
+        /** 排序配置 */
+        sortConfig?: SortConfig;
     }>(),
     {
         width: '',
@@ -317,6 +319,9 @@ const props = withDefaults(
         autoResize: true,
         fixedColShadow: false,
         optimizeVue2Scroll: false,
+        sortConfig: () => ({
+            emptyToBottom: false,
+        }),
     },
 );
 
@@ -325,7 +330,7 @@ const emits = defineEmits<{
      * 排序变更触发
      * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
      */
-    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[]): void;
+    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig): void;
     /**
      * 一行点击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -690,13 +695,13 @@ function onColumnSort(col?: StkTableColumn<any>, click = true, options: { force?
     sortOrderIndex.value = sortOrderIndex.value % 3;
 
     const order = sortSwitchOrder[sortOrderIndex.value];
-
+    const sortConfig = props.sortConfig;
     if (!props.sortRemote || options.force) {
-        dataSourceCopy.value = tableSort(col, order, props.dataSource);
+        dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
     }
     // 只有点击才触发事件
     if (click || options.emit) {
-        emits('sort-change', col, order, toRaw(dataSourceCopy.value));
+        emits('sort-change', col, order, toRaw(dataSourceCopy.value), sortConfig);
     }
 }
 

package/src/StkTable/types/index.ts

@@ -68,3 +68,9 @@ export type SortState<T> = {
 };
 
 export type UniqKey = string | ((param: any) => string);
+
+/** 排序配置 */
+export type SortConfig = {
+    /** 空值始终排在列表末尾 */
+    emptyToBottom?: boolean;
+};

package/src/StkTable/utils.ts

@@ -1,5 +1,5 @@
 import { Default_Col_Width } from './const';
-import { Order, SortOption, SortState, StkTableColumn } from './types';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types';
 
 /**
  * 对有序数组插入新数据
@@ -63,6 +63,34 @@ function strCompare(a: string, b: string, type: 'number' | 'string'): number {
     }
 }
 
+/**
+ * 分离出空数据和非空数据成两个数组
+ * @param sortOption
+ * @param targetDataSource
+ * @param isNumber 1 数组
+ * @return [值数组,空数组]
+ */
+function separatedData(sortOption: SortOption, targetDataSource: any[], isNumber?: boolean) {
+    const emptyArr: any[] = [];
+    const valueArr: any[] = [];
+
+    for (let i = 0; i < targetDataSource.length; i++) {
+        const row = targetDataSource[i];
+        const sortField = sortOption.sortField || sortOption.dataIndex;
+        let isEmpty = row[sortField] === null || row[sortField] === '';
+        if (isNumber) {
+            isEmpty ||= typeof row[sortField] === 'boolean' || Number.isNaN(+row[sortField]);
+        }
+
+        if (isEmpty) {
+            emptyArr.push(row);
+        } else {
+            valueArr.push(row);
+        }
+    }
+    return [valueArr, emptyArr] as const;
+}
+
 /**
  * 表格排序抽离
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
@@ -72,9 +100,11 @@ function strCompare(a: string, b: string, type: 'number' | 'string'): number {
  * @param order 排序方式
  * @param dataSource 排序的数组
  */
-export function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[] {
+export function tableSort(sortOption: SortOption, order: Order, dataSource: any[], sortConfig: SortConfig = {}): any[] {
     if (!dataSource?.length) return dataSource || [];
+    sortConfig = Object.assign({ emptyToBottom: false } as SortConfig, sortConfig);
     let targetDataSource = [...dataSource];
+
     if (typeof sortOption.sorter === 'function') {
         const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
         if (customSorterData) targetDataSource = customSorterData;
@@ -83,36 +113,32 @@ export function tableSort(sortOption: SortOption, order: Order, dataSource: any[
         let { sortType } = sortOption;
         if (!sortType) sortType = typeof dataSource[0][sortField] as 'number' | 'string';
 
+        const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, sortType === 'number');
+
         if (sortType === 'number') {
             // 按数字类型排序
-            const nanArr: any[] = []; // 非数字
-            const numArr: any[] = []; // 数字
-
-            for (let i = 0; i < targetDataSource.length; i++) {
-                const row = targetDataSource[i];
-                if (row[sortField] === null || row[sortField] === '' || typeof row[sortField] === 'boolean' || Number.isNaN(+row[sortField])) {
-                    nanArr.push(row);
-                } else {
-                    numArr.push(row);
-                }
-            }
             // 非数字当作最小值处理
             if (order === 'asc') {
-                numArr.sort((a, b) => +a[sortField] - +b[sortField]);
-                targetDataSource = [...nanArr, ...numArr];
+                valueArr.sort((a, b) => +a[sortField] - +b[sortField]);
+                targetDataSource = [...emptyArr, ...valueArr];
             } else {
-                numArr.sort((a, b) => +b[sortField] - +a[sortField]);
-                targetDataSource = [...numArr, ...nanArr];
+                valueArr.sort((a, b) => +b[sortField] - +a[sortField]);
+                targetDataSource = [...valueArr, ...emptyArr];
             }
-            // targetDataSource = [...numArr, ...nanArr]; // 非数字不进入排序，一直排在最后
         } else {
             // 按string 排序
             if (order === 'asc') {
-                targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
+                valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
+                targetDataSource = [...emptyArr, ...valueArr];
             } else {
-                targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
+                valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
+                targetDataSource = [...valueArr, ...emptyArr];
             }
         }
+
+        if (sortConfig.emptyToBottom) {
+            targetDataSource = [...valueArr, ...emptyArr];
+        }
     }
     return targetDataSource;
 }