refactor(Table): 解决初始排序错误问题&优化排序代码 (#1242)

Author: xingyan95

packages/devui-vue/devui/table/src/components/header-th/use-header-th.ts

@@ -1,4 +1,4 @@
-import { ref, Ref, computed, getCurrentInstance, inject, onMounted } from 'vue';
+import { ref, Ref, computed, getCurrentInstance, inject, onMounted, nextTick } from 'vue';
 import { Column, FilterConfig, SortDirection } from '../column/column-types';
 import { TABLE_TOKEN, ITableInstanceAndDefaultRow } from '../../table-types';
 import { UseSort, UseFilter, UseBaseRender, UseDragColumnWidth } from './header-th-types';
@@ -15,13 +15,14 @@ export function useBaseRender(column: Ref<Column>): UseBaseRender {
 export function useSort(column: Ref<Column>): UseSort {
   const table = inject(TABLE_TOKEN) as ITableInstanceAndDefaultRow;
   const store = table.store;
-  const direction = ref<SortDirection | undefined>(column.value.sortDirection);
+  const direction = ref<SortDirection>(column.value.sortDirection || '');
   const sortClass = computed(() => ({
     'sort-active': Boolean(direction.value),
   }));
   const thInstance = getCurrentInstance();
-  thInstance && store.states.thList.push(thInstance);
-  onMounted(() => {
+  thInstance && store.collectTh(thInstance);
+  onMounted(async () => {
+    await nextTick();
     column.value.sortable && column.value.sortDirection && store.sortData?.(direction.value, column.value.sortMethod);
   });
   const execClearSortOrder = () => {

packages/devui-vue/devui/table/src/composables/use-sort.ts

@@ -0,0 +1,23 @@
+import type { ComponentInternalInstance, Ref } from 'vue';
+import { SortDirection, SortMethod } from '../components/column/column-types';
+import { UseSort } from './use-table-types';
+
+export function useSort<T extends Record<string, unknown>>(dataSource: Ref<T[]>, _data: Ref<T[]>): UseSort<T> {
+  const thList: ComponentInternalInstance[] = [];
+
+  const sortData = (direction: SortDirection, sortMethod: SortMethod<T> | undefined) => {
+    if (direction === 'ASC') {
+      _data.value = _data.value.sort((a, b) => (sortMethod ? (sortMethod(a, b) ? 1 : -1) : 0));
+    } else if (direction === 'DESC') {
+      _data.value = _data.value.sort((a, b) => (sortMethod ? (sortMethod(a, b) ? -1 : 1) : 0));
+    } else {
+      _data.value = [...dataSource.value];
+    }
+  };
+
+  const collectTh = (th: ComponentInternalInstance) => {
+    thList.push(th);
+  };
+
+  return { thList, collectTh, sortData };
+}

packages/devui-vue/devui/table/src/composables/use-table-types.ts

@@ -1,3 +1,12 @@
+import type { ComponentInternalInstance } from 'vue';
+import type { SortDirection, SortMethod } from '../components/column/column-types';
+
 export interface UseHorizontalScroll {
   onTableScroll: (e: Event) => void;
 }
+
+export interface UseSort<T> {
+  thList: ComponentInternalInstance[];
+  collectTh: (th: ComponentInternalInstance) => void;
+  sortData: (direction: SortDirection, sortMethod: SortMethod<T> | undefined) => void;
+}

packages/devui-vue/devui/table/src/store/index.ts

@@ -1,11 +1,12 @@
 import { isBoolean } from '../../../shared/utils';
-import { watch, Ref, ref, computed, unref, ComponentInternalInstance } from 'vue';
-import type { Column, SortMethod, SortDirection, LevelColumn } from '../components/column/column-types';
+import { watch, Ref, ref, computed, unref } from 'vue';
+import type { Column, LevelColumn } from '../components/column/column-types';
 import type { DefaultRow, ITable, RowKeyType } from '../table-types';
 import type { TableStore } from './store-types';
 import { useExpand } from './use-expand';
 import { useEditTableCell } from './use-edit-table-cell';
 import { getRowIdentity } from '../utils';
+import { useSort } from '../composables/use-sort';
 
 function replaceColumn(array: LevelColumn[], column: LevelColumn) {
   return array.map((item) => {
@@ -96,15 +97,7 @@ function doFlattenRows<T extends Record<string, unknown>>(
     if ((data as Record<string, unknown>).children) {
       rowLevelMap.value[getRowIdentity(data as Record<string, unknown>, rowKey)] = level;
       // eslint-disable-next-line prefer-spread
-      result.push.apply(
-        result,
-        doFlattenRows<T>(
-          data.children as T[],
-          level + 1,
-          rowKey,
-          rowLevelMap,
-          hiddenRowKeys
-        ));
+      result.push.apply(result, doFlattenRows<T>(data.children as T[], level + 1, rowKey, rowLevelMap, hiddenRowKeys));
     }
   });
   return result;
@@ -232,21 +225,6 @@ function createSelection<T extends Record<string, unknown>>(dataSource: Ref<T[]>
   };
 }
 
-function createSorter<T extends Record<string, unknown>>(dataSource: Ref<T[]>, _data: Ref<T[]>) {
-  const sortData = (direction: SortDirection, sortMethod: SortMethod<T>) => {
-    if (direction === 'ASC') {
-      _data.value = _data.value.sort((a, b) => (sortMethod ? (sortMethod(a, b) ? 1 : -1) : 0));
-    } else if (direction === 'DESC') {
-      _data.value = _data.value.sort((a, b) => (sortMethod ? (sortMethod(a, b) ? -1 : 1) : 0));
-    } else {
-      _data.value = [...dataSource.value];
-    }
-  };
-
-  const thList: ComponentInternalInstance[] = [];
-  return { sortData, thList };
-}
-
 function createFixedLogic(columns: Ref<Column[]>) {
   const isFixedLeft = computed(() => {
     return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
@@ -276,7 +254,7 @@ export function createStore<T extends Record<string, unknown>>(dataSource: Ref<T
     flatRows
   );
 
-  const { sortData, thList } = createSorter<T>(dataSource, flatRows);
+  const { thList, collectTh, sortData } = useSort(dataSource, flatRows);
 
   const { isFixedLeft } = createFixedLogic(_columns);
   const { isRowExpanded, updateExpandRows, setExpandRows, toggleRowExpansion } = useExpand(_data, table);
@@ -315,6 +293,7 @@ export function createStore<T extends Record<string, unknown>>(dataSource: Ref<T
     updateColumns,
     updateRows,
     getCheckedRows,
+    collectTh,
     sortData,
     isRowChecked,
     checkRow,

packages/devui-vue/devui/table/src/store/store-types.ts

@@ -48,8 +48,9 @@ export interface TableStore<T = Record<string, unknown>> {
   updateRows(): void;
   // 获取勾选行
   getCheckedRows(): T[];
+  collectTh(th: ComponentInternalInstance): void;
   // 排序数据
-  sortData(direction: SortDirection, sortMethod: SortMethod<T>): void;
+  sortData(direction: SortDirection, sortMethod: SortMethod<T> | undefined): void;
   // 特定行数据是否勾选
   isRowChecked(row: T, index: number): boolean;
   // 保存勾选行的信息