antd pro component - EditableProTable 表单重置

最新推荐文章于 2025-03-23 21:30:30 发布

vueer

最新推荐文章于 2025-03-23 21:30:30 发布

阅读量4.5k

点赞数 4

文章标签： react

本文链接：https://blog.youkuaiyun.com/wangming0123/article/details/119203928

版权

本文主要探讨了在使用Ant Design Pro的EditableProTable组件时，遇到的受控模式下数据源（dataSource）变更但表格编辑状态未及时更新的问题。通过实例代码展示了如何利用Form实例的resetFields方法来强制更新表单，确保数据与视图的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd pro component - EditableProTable

受控情况之下，改变 dataSource之后，但是表格编辑组件还是记录上次编辑状态记录的数据，没有及时更新，解决办法就是手动更新表单（其实整个表格就是一个form）

开始干活，上代码！(代码直接从项目摘出来的，看起来有点乱，核心部分都在）

  // 声明form实例
  const [form] = Form.useForm();
  console.log('打印formValues：',form.getFieldsValue());

 <EditableProTable<OrderCargoDtoType>
            // scroll={{ x: 1300 }}
            rowKey="id"
            columns={columnsArr(short_width, options, onSelect, onSearch)}
            // request={requestTableData}
            dataSource={dataSource}
            pagination={pageConfig}
            actionRef={tableRef}
            //onChange={setDataSource}
            rowSelection={{ ...rowSelection, checkStrictly: false }}
            toolBarRender={() => {
              return renderTableToolBar(save, handleExport, dataCensus, batch,openEdit);
            }}
            editable={{
              form:form,
              type: 'multiple',
              .....



//这里是修改dataSource的地方，也是需要更新表单的地方


 getData={(data: any) => {
              modifyRowKeys.forEach((ele, index) => {
                let i = dataSource.findIndex((item) => {
                  return item.id == ele;
                });

                for (let key in data) {
                   dataSource[i][key] = data[key];
                 }
              });
               setDataSource(dataSource);
               //------------------就是这里！！！--------------
              form.resetFields();
             }}
.....