// 尝试一
valueEnum: multipleOptions,
valueType: 'select',
fieldProps: {
mode: "multiple"
},
// 尝试二
// 即使Select中已经有了Options,但为了表格能回显被选择的值,还是要有valueEnum
valueEnum: multipleOptions,
renderFormItem: () => {
return <MutipleSelect />;
},
// value和onChange必须注入
const MutipleSelect = ({ value, onChange }) => {
return (
<Select
// showSearch
value={value}
mode={"multiple"}
style={{ width: 140 }}
onChange={(e) => {
onChange(e);
}}
maxTagCount={'responsive'}
maxTagPlaceholder={(omittedValues) => (
<Tooltip title={omittedValues.map(({ label }) => label).join(', ')}>
<span>{(omittedValues && omittedValues.length > 0)? `${omittedValues[0].label}...` : ""}</span>
</Tooltip>
)}
options={multipleAllOptions}
/>
)
}
问题复现:多选框选择选项后,点击保存,表格中这个字段不是我最后一次选择的值。
分析:
1. 示例1和示例2中,若是去除mode:multiple,并无问题;说明可编辑表格是能监听到它的变化;
2. 示例1和示例2保留多选状态,在onSave方法中,发现并没获取到最后一次选择的值。但是onValueChange方法能及时拿到变化后的所有行的数据。
3. 可编辑表格作为了form表单中一个item,是可以通过form.setFieldsValue对表格进行赋值
初次解决方案如下: 解决了多选框的值不更新的问题
onValuesChange: (record, recordList) => {
// recordList里边是最新的表格数据
form.setFieldsValue({multipleItem: recordList});
}
新问题出现了:点击复制,修改新复制出来的行中的任意字段,改一次增加一条新的行。
最终解决方案:
// 之前是cache,所以导致编辑一次,复制一行的现象
newRecordType={'dataSource'}
// 记得加上这个属性,去除行编辑的取消功能
actionRender: (row, config, dom) => [dom.save, dom.delete]
官网解释