vxe-table removeRows方法加上异步删除

src/components/jeecg/JVxeTable/src/hooks/useMethods.ts

@@ -639,13 +639,45 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
   }
 
   /** 删除一行或多行数据 */
-  async function removeRows(rows) {
+  async function removeRows(rows, asyncRemove = false) {
+    // update-begin--author:liaozhiyang---date:20231123---for：vxe-table removeRows方法加上异步删除
     const xTable = getXTable();
-    const res = await xTable.remove(rows);
-    let removeEvent: any = { deleteRows: rows, $table: xTable };
-    trigger('removed', removeEvent);
-    await recalcSortNumber();
-    return res;
+    const removeEvent: any = { deleteRows: rows, $table: xTable };
+    if (asyncRemove) {
+      const selectedRows = Array.isArray(rows) ? rows : [rows];
+      const deleteOldRows = filterNewRows(selectedRows);
+      if (deleteOldRows.length) {
+        return new Promise((resolve) => {
+          // 确认删除，只有调用这个方法才会真删除
+          removeEvent.confirmRemove = async () => {
+            const insertRecords = xTable.getInsertRecords();
+            selectedRows.forEach((item) => {
+              // 删除新添加的数据id
+              if (insertRecords.includes(item)) {
+                delete item.id;
+              }
+            });
+            const res = await xTable.remove(rows);
+            await recalcSortNumber();
+            resolve(res);
+          };
+          trigger('removed', removeEvent);
+        });
+      } else {
+        // 全新的行立马删除，不等待。
+        const res = await xTable.remove(rows);
+        removeEvent.confirmRemove = () => {};
+        trigger('removed', removeEvent);
+        await recalcSortNumber();
+        return res;
+      }
+    } else {
+      const res = await xTable.remove(rows);
+      trigger('removed', removeEvent);
+      await recalcSortNumber();
+      return res;
+    }
+    // update-end--author:liaozhiyang---date:20231123---for：vxe-table removeRows方法加上异步删除
   }
 
   /** 根据id删除一行或多行 */
@@ -781,7 +813,6 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
     emit(name, event);
   }
 
-
   /**
    * 获取选中的行-和 getSelectionData 区别在于对于新增的行也会返回ID
    * 用于onlinePopForm

src/components/jeecg/JVxeTable/src/hooks/useToolbar.ts

@@ -37,6 +37,10 @@ export function useToolbar(props: JVxeTableProps, data: JVxeDataProps, methods:
                 // 确认删除，只有调用这个方法才会真删除
                 removeEvent.confirmRemove = () => methods.removeSelection();
               } else {
+                if (props.asyncRemove) {
+                  // asyncRemove删除的只有新增的数据时，防止调用confirmRemove报错
+                  removeEvent.confirmRemove = () => {};
+                }
                 methods.removeSelection();
               }
               methods.trigger('removed', removeEvent);

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue

@@ -216,7 +216,7 @@
       key: 'action',
       type: JVxeTypes.slot,
       fixed: 'right',
-      minWidth: 100,
+      minWidth: 120,
       align: 'center',
       slotName: 'myAction',
     },
@@ -291,12 +291,18 @@
     console.log('查看: ', { props });
   }
 
+  // async function onDeleteRow(props) {
+  //   // 同步调用删除方法
+  //   const res = await tableRef.value?.removeRows(props.row);
+  //   if (res && res.rows.length > 0) {
+  //     createMessage.success('删除成功');
+  //   }
+  // }
+
   async function onDeleteRow(props) {
-    // 调用删除方法
-    const res = await tableRef.value?.removeRows(props.row);
-    if (res && res.rows.length > 0) {
-      createMessage.success('删除成功');
-    }
+    // 异步调用删除方法
+    const res = await tableRef.value?.removeRows(props.row, true);
+    console.log('删除成功~', res);
   }
 
   function handleValueChange(event) {
@@ -361,8 +367,13 @@
   }
 
   function doDelete(deleteRows) {
+    let rowId;
     return new Promise((resolve) => {
-      let rowId = deleteRows.filter((row) => row.id);
+      if (Array.isArray(deleteRows)) {
+        rowId = deleteRows.filter((row) => row.id);
+      } else {
+        rowId = deleteRows.id;
+      }
       console.log('删除 rowId: ', rowId);
       setTimeout(() => resolve(true), 1500);
     });