EditableProTable(可编辑表格) 之坑

 

针对以上出现的情况我们只需要把 EditableProTable 组件中的 setEditableRowKeys(可编辑的key)给清空就可以了.  setEditableRowKeys([]);

核心代码:

modalProps={{
          // 弹窗属性
          destroyOnClose: true,
          onCancel: () => { // 点击取消按钮的回调
            setEditableRowKeys([]); // 把 EditableProTable 组件中 setEditableRowKeys(可编辑行的key)的值清空
            setVisibles(false);
          },
          open: visibles, // Modal 是否可见
          afterClose: () => {
            setEditableRowKeys([]); // 把 EditableProTable 组件中 setEditableRowKeys(可编辑行的key)的值清空
          }, // Modal 完全关闭后的回调
        }}

完整代码:

import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
  ModalForm,
  ProFormList,
  ProFormCascader,
  ProFormText,
  EditableProTable,
  ProFormGroup,
} from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Space, Descriptions, Form } from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import PageModal from './PageModal';
import {
  deletePubCfg, getPubCfgDetail,
  getPubCfgPage,
  onlinePubCfg,
  savePubCfg,
  submitPubCfg,
  getPubCatgTreeNodes
} from "@/pages/catalogLayer/catalogApply/service";

type TableListPagination = {
  total: number;
  pageSize: number;
  current: number;
};
type DataSourceType = {
  id: string;
  catalogId: string;
  itemName?: string;
  // enName?: string;
  itemType?: string;
  itemLength?: string;
};

const CatalogApply: React.FC = () => {
  /*新建弹窗*/
  const [visibles, setVisibles] = useState(false);

  /*新增行表格*/
  const actionRef2 = useRef<ActionType>();
  const [form] = Form.useForm();
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  const columns2: ProColumns<DataSourceType>[] = [
    {
      title: '信息项名称',
      dataIndex: 'itemName',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
      // width: '20%',
    },
    /*{
      title: '英文名称',
      dataIndex: 'enName',
      width: '20%',
    },*/
    {
      title: '信息项类型',
      key: 'itemType',
      dataIndex: 'itemType',
      valueType: 'select',
      // 把外面自定义值传给这个valueEnum
      valueEnum: () => {
        return dataType; // 这里的dataType是外面定义的一个变量
      },
      // width: '20%',
    },
    {
      title: '信息项长度',
      dataIndex: 'itemLength',
      // width: '20%',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 140,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={() => {
            setDataSource(dataSource.filter((item) => item.id !== record.id));
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <Button
         type="primary"
         key="add"
         onClick={() => {
           setDataSource([]); // 清空新建表格数据
           setVisibles(true); // 开启弹窗
         }}
         size="small"
       >
       新建
       </Button>
      {/*新建弹窗*/}
      <ModalForm
        title={substepValue}
        initialValues={currentRow}
        autoFocusFirstInput
        modalProps={{
          // 弹窗属性
          destroyOnClose: true,
          onCancel: () => { // 点击取消按钮的回调
            setEditableRowKeys([]); // 把 EditableProTable 组件中 setEditableRowKeys(可编辑行的key)的值清空
            setVisibles(false);
          },
          open: visibles, // Modal 是否可见
          afterClose: () => {
            setEditableRowKeys([]); // 把 EditableProTable 组件中 setEditableRowKeys(可编辑行的key)的值清空
          }, // Modal 完全关闭后的回调
        }}
        onFinish={async (values) => {
          const objList = {
              catalogItems: dataSource,
              id: currentRow?.id
            }
          if(currentRow?.id){
              const res = await savePubCfg({ ...objList})
              if(res.code === 200){
                message.success('编辑成功');
                if (actionRef.current) {
                  actionRef.current.reload();
                }
              }
              setVisibles(false);
              return;
            }else {
              const res = await savePubCfg({ ...objList })
              if(res.code === 200){
                message.success('新增成功');
                if (actionRef.current) {
                  actionRef.current.reload();
                }
              }
              setVisibles(false);
            }
        }}
        layout="horizontal" // 开启grid布局
        grid={true}
      >
        <ProFormGroup>
          <ProFormText
            name="name"
            label="申请目录名称"
            placeholder="请输入"
            rules={[{ required: true }]}
            labelCol={{ span: 4 }}
          />
        </ProFormGroup>
        <ProFormGroup>
          <ProFormCascader
            label="发布目录类型"
            placeholder="请选择"
            rules={[{ required: true }]}
            labelCol={{ span: 4 }}
            name="catgIdArray"
            request={async () => {
              const res = await getPubCatgTreeNodes();
              if (res.status === 'success') {
                if (res?.data2?.length !== 0 && res?.data2[0] !== null) {
                  return res.data2;
                }
              }
              /*if (res.status === 'success') {
                if (res?.data2?.length !== 0 && res?.data2[0] !== null) {
                  return res.data2;
                }
              }*/
            }}
            fieldProps={{
              onChange: (value,selectedOptions) => {
                setSelectedRowKeys(selectedOptions);
              },
              showArrow: false,
              showSearch: true,
              dropdownMatchSelectWidth: false,
              multiple: true,// 是否支持多选
              fieldNames: {
                label: 'title',
                value: 'value',
              },
              /*fieldNames: {
                label: 'name',
                value: 'id',
                children: 'children',
              },*/
              displayRender: (selectedOptions) => {
                return selectedOptions.join('/');
              },
            }}
          />
        </ProFormGroup>
        <ProFormGroup>
          <ProFormText
            name="resOrgName"
            label="资源提供单位"
            placeholder="此单位应和接口单位保持一致"
            rules={[{ required: true }]}
            labelCol={{ span: 4 }}
            initialValue={currentUser?.orgName}
          />
        </ProFormGroup>
        <ProFormGroup>
          <ProFormList
            name="tags"
            initialValue={[{ publabel: '默认标签' }]}
            creatorButtonProps={{
              creatorButtonText: '新建',
              icon: false,
              type: 'link',
              style: { width: 'unset' },
            }}
            actionGuard={{
              beforeRemoveRow: async (index) => {
                return new Promise((resolve) => {
                  if (index === 0) {
                    message.error('这行不能删');
                    resolve(false);
                    return;
                  }
                  setTimeout(() => resolve(true), 100);
                });
              },
            }}
          >
            <ProFormText
              name="publabel"
              label="标签"
              placeholder="请输入"
              rules={[{ required: true }]}
              labelCol={{ span: 4 }}
            />
          </ProFormList>
        </ProFormGroup>
        {/*表格*/}
        <Descriptions title="目录信息项" />
        <>
          <Button
            style={{ marginBottom: 16, marginLeft: 24 }}
            type="primary"
            onClick={() => {
              actionRef2.current?.addEditRecord?.({
                id: (Math.random() * 1000000).toFixed(0),
              });
            }}
            icon={<PlusOutlined />}
          >
            新建一行
          </Button>
          <EditableProTable<DataSourceType>
            rowKey="id"
            actionRef={actionRef2}
            // 关闭默认的新建按钮
            recordCreatorProps={false}
            columns={columns2}
            value={dataSource}
            onChange={setDataSource}
            editable={{ // 意思是可编辑
              form,// form里面是表单的数据
              editableKeys, // 可编辑的key
              onSave: async () => {}, // 保存
              onChange: setEditableRowKeys, // 设置可编辑的key
              actionRender: (row, config, dom) => [dom.save, dom.cancel],
            }}
          />
        </>
      </ModalForm>
      {/*详情弹窗*/}
      <PageModal ref={cRef} />
    </PageContainer>
  );
};

export default CatalogApply;