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

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

官网解释

  • 10
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: EditableProTable 的 Tab 是指表格的多页签功能,可以让用户在同一个表格组件内切换不同的页签,以展示不同的数据。使用 EditableProTable 的 Tab 功能可以方便地实现数据的分页展示,并且可以通过 Tab 栏快速切换展示不同的数据页签,提高了用户体验。在 EditableProTable 中,可以通过配置 dataSource 和 columns 来定义每个 Tab 下的数据和表格列信息。同时,也可以通过 onChange 事件来监听 Tab 切换时的回调函数,以便在用户切换 Tab 时执相应的操作。 ### 回答2: EditableProTable 的 Tab 是指 EditableProTable 组件中的一个选项卡,用于实现数据的分组展示和切换。 EditableProTable 是一个基于 Ant Design 的表格组件,可以实现表格数据的编辑和可视化操作。而 Tab 是 EditableProTable 组件中的一种展示方式,可以将表格数据按照不同的分组进展示和切换。 通过使用 EditableProTable 的 Tab 功能,我们可以将大量数据分成不同的组,并且可以通过选项卡来切换不同的组,使得数据的管理和查看更加方便和直观。每个选项卡对应一个数据分组,可以在每个选项卡中显示该组数据的表格,并且可以对数据进编辑和操作。 在 Tab 中,我们可以自定义选项卡的名称和排序,可以根据具体的业务需求来设置不同的选项卡。同时,也可以在选项卡上添加图标或其他标识,以便更加清晰地区分不同的数据分组。 总之,EditableProTable 的 Tab 功能是为了更加方便地展示和切换表格数据分组而设计的,可以提高数据的管理效率和用户的操作体验。 ### 回答3: EditableProTable的Tab是一个用于显示和管理表格数据的可编辑标签页组件。它是Ant Design Pro框架中的一个重要组成部分,提供了丰富的功能和交互方式,方便用户对表格数据进增删改查操作。 EditableProTable的Tab通过使用Tab组件,将表格数据分成不同的标签页展示,每个标签页可以独立操作和管理数据。用户可以通过点击不同的标签页来切换展示不同的数据集合,从而方便地查看和编辑不同类型的数据。 EditableProTable的Tab不仅支持基本的增删改查功能,还可以进自定义列设置、数据排序、筛选和分页等操作。用户可以根据自己的需求,灵活地配置和管理表格数据的展示和操作方式。 此外,EditableProTable的Tab还支持批量操作和快速搜索功能,提供了方便的数据处理和查找方式。 总之,EditableProTable的Tab是一个功能强大、灵活多样的标签页组件,可以帮助用户进方便高效的表格数据管理和操作。无论是对于数据展示还是数据处理,它都提供了丰富的功能和交互方式,使得用户可以轻松地对表格数据进管理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值