feat(table): support custom update on row editing

在表格进入行编辑状态时，在某一列数据发生修改时，允许获取或同步修改其它列的当前编辑数据。 close #646
vbenjs · Jun 5, 2021 · fe2bcfc · fe2bcfc
1 parent 808012b
commit fe2bcfc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
@@ -282,6 +282,10 @@
         initCbs('validCbs', handleSubmiRule);
         initCbs('cancelCbs', handleCancel);
 
+        if (props.column.dataIndex) {
+          if (!props.record.editValueRefs) props.record.editValueRefs = {};
+          props.record.editValueRefs[props.column.dataIndex] = currentValueRef;
+        }
         /* eslint-disable  */
         props.record.onCancelEdit = () => {
           isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());

diff --git a/src/components/Table/src/components/editable/index.ts b/src/components/Table/src/components/editable/index.ts
@@ -1,6 +1,6 @@
 import type { BasicColumn } from '/@/components/Table/src/types/table';
 
-import { h } from 'vue';
+import { h, Ref } from 'vue';
 
 import EditableCell from './EditableCell.vue';
 
@@ -50,5 +50,6 @@ export type EditRecordRow<T = Recordable> = Partial<
     submitCbs: Fn[];
     cancelCbs: Fn[];
     validCbs: Fn[];
+    editValueRefs: Recordable<Ref>;
   } & T
 >;
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-4">
-    <BasicTable @register="registerTable">
+    <BasicTable @register="registerTable" @edit-change="onEditChange">
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" />
       </template>
@@ -145,6 +145,9 @@
 
       const [registerTable] = useTable({
         title: '可编辑行示例',
+        titleHelpMessage: [
+          '本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
+        ],
         api: demoListApi,
         columns: columns,
         showIndexColumn: false,
@@ -198,10 +201,19 @@
         ];
       }
 
+      function onEditChange({ column, value, record }) {
+        // 本例
+        if (column.dataIndex === 'id') {
+          record.editValueRefs.name4.value = `${value}`;
+        }
+        console.log(column, value, record);
+      }
+
       return {
         registerTable,
         handleEdit,
         createActions,
+        onEditChange,
       };
     },
   });