perf(vxetable): 封装方法中加入可编辑表格和表单验证相关方法名，并在demo中增加新增和删除方法调用实现 (#2532)

* perf(vxetable): 封装方法中加入可编辑表格相关方法名，并在demo中增加新增和删除方法调用实现

* perf(vxetable): 封装方法中加入表单验证方法名

---------

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>

src/components/VxeTable/src/VxeBasicTable.tsx

@@ -5,7 +5,14 @@ import { basicProps } from './props';
 import { ignorePropKeys } from './const';
 import { basicEmits } from './emits';
 import XEUtils from 'xe-utils';
-import type { VxeGridInstance, VxeGridEventProps, GridMethods, TableMethods } from 'vxe-table';
+import type {
+  VxeGridInstance,
+  VxeGridEventProps,
+  GridMethods,
+  TableMethods,
+  TableEditMethods,
+  TableValidatorMethods,
+} from 'vxe-table';
 import { Grid as VxeGrid } from 'vxe-table';
 
 import { extendSlots } from '/@/utils/helper/tsxHelper';
@@ -35,7 +42,9 @@ export default defineComponent({
     };
 
     const gridExtendTableMethods = extendTableMethods(gridComponentMethodKeys) as GridMethods &
-      TableMethods;
+      TableMethods &
+      TableEditMethods &
+      TableValidatorMethods;
 
     basicEmits.forEach((name) => {
       const type = XEUtils.camelCase(`on-${name}`) as keyof VxeGridEventProps;

src/components/VxeTable/src/methods.ts

@@ -1,6 +1,11 @@
-import { GridMethods, TableMethods } from 'vxe-table';
+import { GridMethods, TableMethods, TableEditMethods, TableValidatorMethods } from 'vxe-table';
 
-export const gridComponentMethodKeys: (keyof GridMethods | keyof TableMethods)[] = [
+export const gridComponentMethodKeys: (
+  | keyof GridMethods
+  | keyof TableMethods
+  | keyof TableEditMethods
+  | keyof TableValidatorMethods
+)[] = [
   // vxe-grid 部分
   'dispatchEvent',
   'commitProxy',
@@ -126,6 +131,30 @@ export const gridComponentMethodKeys: (keyof GridMethods | keyof TableMethods)[]
   'blur',
   'connect',
 
+  // vxe-table-edit部分
+  'insert',
+  'insertAt',
+  'remove',
+  'removeCheckboxRow',
+  'removeRadioRow',
+  'removeCurrentRow',
+  'getRecordset',
+  'getInsertRecords',
+  'getRemoveRecords',
+  'getUpdateRecords',
+  'getEditRecord',
+  'getSelectedCell',
+  'clearSelected',
+  'isEditByRow',
+  'setEditRow',
+  'setEditCell',
+  'setSelectCell',
+
+  // vxe-table-validator
+  'clearValidate',
+  'fullValidate',
+  'validate',
+
   //... 如有缺少在此处追加
   // xxx
 ];

src/views/demo/table/VxeTable.vue

@@ -14,11 +14,11 @@
 </template>
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
-  import { TableAction, ActionItem } from '/@/components/Table';
+  import { ActionItem, TableAction } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { vxeTableColumns, vxeTableFormSchema } from './tableData';
-  import { VxeBasicTable, BasicTableProps, VxeGridInstance } from '/@/components/VxeTable';
+  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
   import { demoListApi } from '/@/api/demo/table';
 
   const { createMessage } = useMessage();
@@ -32,7 +32,7 @@
     toolbarConfig: {
       buttons: [
         {
-          content: '自定义按钮',
+          content: '在第一行新增',
           buttonRender: {
             name: 'AButton',
             props: {
@@ -40,7 +40,22 @@
             },
             events: {
               click: () => {
-                createMessage.success('点击了自定义按钮');
+                tableRef.value?.insert({ name: '新增的' });
+                createMessage.success('新增成功');
+              },
+            },
+          },
+        },
+        {
+          content: '在最后一行新增',
+          buttonRender: {
+            name: 'AButton',
+            props: {
+              type: 'warning',
+            },
+            events: {
+              click: () => {
+                tableRef.value?.insertAt({ name: '新增的' }, -1);
               },
             },
           },
@@ -62,8 +77,7 @@
           });
         },
         queryAll: async ({ form }) => {
-          const data = await demoListApi(form);
-          return data;
+          return await demoListApi(form);
         },
       },
     },
@@ -87,7 +101,9 @@
         color: 'error',
         popConfirm: {
           title: '是否确认删除',
-          confirm: () => {},
+          confirm: () => {
+            tableRef.value?.remove(record);
+          },
         },
       },
     ];