Jelajahi Sumber

feat(table): add updateTableDataRecord method

添加updateTableDataRecord以便可以根据指定的rowKey来直接更新行数据而无需reload
无木 3 tahun lalu
induk
melakukan
8e4f486fcf

+ 2 - 0
src/components/Table/src/BasicTable.vue

@@ -129,6 +129,7 @@
         getDataSourceRef,
         getDataSource,
         setTableData,
+        updateTableDataRecord,
         fetch,
         getRowKey,
         reload,
@@ -265,6 +266,7 @@
         deleteSelectRowByKey,
         setPagination,
         setTableData,
+        updateTableDataRecord,
         redoHeight,
         setSelectedRowKeys,
         setColumns,

+ 21 - 0
src/components/Table/src/hooks/useDataSource.ts

@@ -149,6 +149,26 @@ export function useDataSource(
     return dataSourceRef.value[index];
   }
 
+  function updateTableDataRecord(
+    rowKey: string | number,
+    record: Recordable
+  ): Recordable | undefined {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+    const rowKeyName = unref(getRowKey);
+    if (typeof rowKeyName !== 'string') {
+      return;
+    }
+    const row = dataSourceRef.value.find(
+      (r) => Reflect.has(r, rowKeyName as string) && r[rowKeyName as string] === rowKey
+    );
+    if (row) {
+      for (const field in row) {
+        if (Reflect.has(record, field)) row[field] = record[field];
+      }
+      return row;
+    }
+  }
+
   async function fetch(opt?: FetchParams) {
     const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } =
       unref(propsRef);
@@ -255,6 +275,7 @@ export function useDataSource(
     fetch,
     reload,
     updateTableData,
+    updateTableDataRecord,
     handleTableChange,
   };
 }

+ 3 - 0
src/components/Table/src/hooks/useTable.ts

@@ -120,6 +120,9 @@ export function useTable(tableProps?: Props): [
     updateTableData: (index: number, key: string, value: any) => {
       return getTableInstance().updateTableData(index, key, value);
     },
+    updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
+      return getTableInstance().updateTableDataRecord(rowKey, record);
+    },
     getRowSelection: () => {
       return toRaw(getTableInstance().getRowSelection());
     },

+ 1 - 0
src/components/Table/src/types/table.ts

@@ -94,6 +94,7 @@ export interface TableActionType {
   deleteSelectRowByKey: (key: string) => void;
   setPagination: (info: Partial<PaginationProps>) => void;
   setTableData: <T = Recordable>(values: T[]) => void;
+  updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
   getColumns: (opt?: GetColumnsParams) => BasicColumn[];
   setColumns: (columns: BasicColumn[] | string[]) => void;
   getDataSource: <T = Recordable>() => T[];