关于ProTable /EditableProTable可编辑表格,dataSource已更新表格展示数据未更新问题

问题描述:ProTable 批量编辑之后,更新了dataSource的值。但是表格展示的输入框中的值未进行更新

解决:更改ProTable 换成EditableProTable并添加 controlled={true}
目前EditableProTable并添加 controlled={true}添加了可以监听到变化。

如果renderFormItem在组件的值变化时,没有触发dataSource的自动更新,

那可以尝试给组件添加value以及onChange事件。

const columns= : ProColumns[] = [{
        title: "统计",
        dataIndex: "total",
        key: "total",
        width: 100,
        editable: false,
        render: (_: any, record: any) => {
        return (
         <InputNumber min={0}  value={record?.total}/>
        );
      },//更新后可以正确展示
      }, {
        title: "统计",
        dataIndex: "total",
        key: "total",
        width: 100,
        renderFormItem: (_, { record }) => {
          return <InputNumber min={0} />;//ProTable 的时候不能正确更新输入框里面的值
        },
        formItemProps: {
          rules: [
            {
              required: true,
              message: "此项是必填项",
            },
            {
              message: "请填写正确的数字",
              pattern: /\d+/,
            },
          ],
        },
      },]

  const handleBatchEdit = (updatedData: []) => {
    const updateDataSource = dataSource.map((item) => {
      // 查找updatedData中是否有与dataSource的id相同的项
      const updatedItem = updatedData.find((updated) => updated.id === item.id);

      // 如果有,返回updatedData中的项,否则返回dataSource中的项
      return updatedItem ? { ...item, ...updatedItem } : item;
    });

    setDataSource([...updateDataSource]);

  };
 <Button type="link" size="small" onChange={handleBatchEdit} />
              

 <EditableProTable
  controlled={true} // 是否受控, 如果受控每次编辑都会触发 onChange,并且会修改 dataSource
    actionRef={tableRef}
    rowKey="id"
    columns={columns}
    value={dataSource}
    pagination={false}
    recordCreatorProps={false}
    options={false}
    rowSelection={{
      onChange: handleSelectedRows,
    }}
    editable={{
      type: "multiple", // 多行编辑
      editableKeys,
      onValuesChange: (record, recordList) => {
        // 表格值编辑变化之后更新表格数据
        setDataSource(recordList);
      },
      onChange: setEditableRowKeys,
    }}
    tableAlertRender={false} // 隐藏勾选统计信息
  />

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在函数组件中实现实时更新数据可以使用React Hooks中的useState和useEffect。 首先,定义一个state用来存储表格数据,使用useState初始化为空数组: ```typescript const [tableData, setTableData] = useState([]); ``` 然后,在useEffect中实现数据的实时更新,可以使用setTimeout模拟异步请求: ```typescript useEffect(() => { const timer = setTimeout(() => { // 模拟异步请求数据 const data = fetchData(); setTableData(data); }, 1000); return () => clearTimeout(timer); }, [tableData]); ``` 这样,每次tableData发生变化时,useEffect会重新执行,从而实现实时更新数据。 完整代码示例: ```typescript import React, { useState, useEffect } from "react"; import ProTable from "@ant-design/pro-table"; interface TableData { key: string; name: string; age: number; address: string; } const fetchData = (): TableData[] => { return [ { key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park", }, { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park", }, { key: "3", name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park", }, ]; }; const TableDemo: React.FC = () => { const [tableData, setTableData] = useState<TableData[]>([]); useEffect(() => { const timer = setTimeout(() => { const data = fetchData(); setTableData(data); }, 1000); return () => clearTimeout(timer); }, [tableData]); const columns = [ { title: "Name", dataIndex: "name", }, { title: "Age", dataIndex: "age", }, { title: "Address", dataIndex: "address", }, ]; return ( <ProTable<TableData> columns={columns} dataSource={tableData} search={false} pagination={false} /> ); }; export default TableDemo; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值