fix(table): recursive updateTableDataRecord (#1024)

无刷新更新表格数据时，支持递归查找，用于树状数据时。同时新增 findTableDataRecord 函数，用于支持无刷新新增数据到树状表格中
vbenjs · Aug 2, 2021 · 72f953c · 72f953c
1 parent d76cfd7
commit 72f953c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
@@ -129,6 +129,7 @@
         getDataSource,
         setTableData,
         updateTableDataRecord,
+        findTableDataRecord,
         fetch,
         getRowKey,
         reload,
@@ -266,6 +267,7 @@
         setPagination,
         setTableData,
         updateTableDataRecord,
+        findTableDataRecord,
         redoHeight,
         setSelectedRowKeys,
         setColumns,

diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
@@ -149,18 +149,8 @@ export function useDataSource(
     rowKey: string | number,
     record: Recordable
   ): Recordable | undefined {
-    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
-    const rowKeyName = unref(getRowKey);
-    if (!rowKeyName) {
-      return;
-    }
-    const row = dataSourceRef.value.find((r) => {
-      if (typeof rowKeyName === 'function') {
-        return (rowKeyName(r) as string) === rowKey;
-      } else {
-        return Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey;
-      }
-    });
+    const row = findTableDataRecord(rowKey);
+
     if (row) {
       for (const field in row) {
         if (Reflect.has(record, field)) row[field] = record[field];
@@ -169,6 +159,43 @@ export function useDataSource(
     }
   }
 
+  function findTableDataRecord(rowKey: string | number) {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+
+    const rowKeyName = unref(getRowKey);
+    if (!rowKeyName) return;
+
+    const { childrenColumnName = 'children' } = unref(propsRef);
+
+    const findRow = (array: any[]) => {
+      let ret;
+      array.some(function iter(r) {
+        if (typeof rowKeyName === 'function') {
+          if ((rowKeyName(r) as string) === rowKey) {
+            ret = r;
+            return true;
+          }
+        } else {
+          if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
+            ret = r;
+            return true;
+          }
+        }
+        return r[childrenColumnName] && r[childrenColumnName].some(iter);
+      });
+      return ret;
+    };
+
+    // const row = dataSourceRef.value.find(r => {
+    //   if (typeof rowKeyName === 'function') {
+    //     return (rowKeyName(r) as string) === rowKey
+    //   } else {
+    //     return Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey
+    //   }
+    // })
+    return findRow(dataSourceRef.value);
+  }
+
   async function fetch(opt?: FetchParams) {
     const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } =
       unref(propsRef);
@@ -280,6 +307,7 @@ export function useDataSource(
     reload,
     updateTableData,
     updateTableDataRecord,
+    findTableDataRecord,
     handleTableChange,
   };
 }
diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
@@ -122,6 +122,9 @@ export function useTable(tableProps?: Props): [
     updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
       return getTableInstance().updateTableDataRecord(rowKey, record);
     },
+    findTableDataRecord: (rowKey: string | number) => {
+      return getTableInstance().findTableDataRecord(rowKey);
+    },
     getRowSelection: () => {
       return toRaw(getTableInstance().getRowSelection());
     },

diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
@@ -95,6 +95,7 @@ export interface TableActionType {
   setPagination: (info: Partial<PaginationProps>) => void;
   setTableData: <T = Recordable>(values: T[]) => void;
   updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
+  findTableDataRecord: (rowKey: string | number) => Recordable | void;
   getColumns: (opt?: GetColumnsParams) => BasicColumn[];
   setColumns: (columns: BasicColumn[] | string[]) => void;
   getDataSource: <T = Recordable>() => T[];