feat(table): 添加和支持动态删除和插入数据 (#1152)

Author: frezs

src/components/Table/src/BasicTable.vue

@@ -141,6 +141,8 @@
         getRawDataSource,
         setTableData,
         updateTableDataRecord,
+        deleteTableDataRecord,
+        insertTableDataRecord,
         findTableDataRecord,
         fetch,
         getRowKey,
@@ -279,6 +281,8 @@
         setPagination,
         setTableData,
         updateTableDataRecord,
+        deleteTableDataRecord,
+        insertTableDataRecord,
         findTableDataRecord,
         redoHeight,
         setSelectedRowKeys,

src/components/Table/src/hooks/useDataSource.ts

@@ -160,6 +160,31 @@ export function useDataSource(
     }
   }
 
+  function deleteTableDataRecord(record: Recordable | Recordable[]): Recordable | undefined {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+    const records = !Array.isArray(record) ? [record] : record;
+    const recordIndex = records
+      .map((item) => dataSourceRef.value.findIndex((s) => s.key === item.key)) // 取序号
+      .filter((item) => item !== undefined)
+      .sort((a, b) => b - a); // 从大到小排序
+    for (const index of recordIndex) {
+      unref(dataSourceRef).splice(index, 1);
+      unref(propsRef).dataSource?.splice(index, 1);
+    }
+    setPagination({
+      total: unref(propsRef).dataSource?.length,
+    });
+    return unref(propsRef).dataSource;
+  }
+
+  function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+    index = index ?? dataSourceRef.value?.length;
+    unref(dataSourceRef).splice(index, 0, record);
+    unref(propsRef).dataSource?.splice(index, 0, record);
+    return unref(propsRef).dataSource;
+  }
+
   function findTableDataRecord(rowKey: string | number) {
     if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
 
@@ -314,6 +339,8 @@ export function useDataSource(
     reload,
     updateTableData,
     updateTableDataRecord,
+    deleteTableDataRecord,
+    insertTableDataRecord,
     findTableDataRecord,
     handleTableChange,
   };

src/components/Table/src/hooks/useTable.ts

@@ -122,6 +122,12 @@ export function useTable(tableProps?: Props): [
     updateTableData: (index: number, key: string, value: any) => {
       return getTableInstance().updateTableData(index, key, value);
     },
+    deleteTableDataRecord: (record: Recordable | Recordable[]) => {
+      return getTableInstance().deleteTableDataRecord(record);
+    },
+    insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
+      return getTableInstance().insertTableDataRecord(record, index);
+    },
     updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
       return getTableInstance().updateTableDataRecord(rowKey, record);
     },

src/components/Table/src/types/table.ts

@@ -95,6 +95,8 @@ export interface TableActionType {
   setPagination: (info: Partial<PaginationProps>) => void;
   setTableData: <T = Recordable>(values: T[]) => void;
   updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
+  deleteTableDataRecord: (record: Recordable | Recordable[]) => Recordable | void;
+  insertTableDataRecord: (record: Recordable, index?: number) => Recordable | void;
   findTableDataRecord: (rowKey: string | number) => Recordable | void;
   getColumns: (opt?: GetColumnsParams) => BasicColumn[];
   setColumns: (columns: BasicColumn[] | string[]) => void;