EditableProTable逐行编辑多选框出现的值不更新的问题

adore_ly

已于 2024-04-12 10:49:13 修改

阅读量733

点赞数 10

CC 4.0 BY-SA版权

文章标签： javascript react.js

于 2024-04-12 10:39:45 首次发布

本文链接：https://blog.youkuaiyun.com/adore_ly/article/details/137667807

文章讲述了开发者在使用React组件构建可编辑表格时遇到的多选框值未能正确保存的问题，通过分析发现`form.setFieldsValue`和新记录类型的处理方式，解决了值不更新和复制行为。最后提到要禁用行编辑的取消功能以防止意外复制。

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

// 尝试一
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]

官网解释