feat(table): support custom update on row editing

无木

2021-06-05 fe2bcfc6f74159c355f3be153a316869fdb8b644

feat(table): support custom update on row editing

在表格进入行编辑状态时，在某一列数据发生修改时，允许获取或同步修改其它列的当前编辑数据。

close #646

 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());

 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 @@
    submitCbs: Fn[];
    cancelCbs: Fn[];
    validCbs: Fn[];
    editValueRefs: Recordable<Ref>;
  } & T
>;

 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,
      };
    },
  });