问题描述: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} // 隐藏勾选统计信息
/>