EditableProTable 编辑表格行里字段校验该如何做？ 🧐[问题]

zhangxiangqiang commented 2 years ago

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

方案一：使用validator ，但是有bug, 无法正常提示message, 如果直接配置一个message 数据，这样无论输入是否错误都有提示，体验不友好；已知这个bug 得过一段时间才能解决；

方案二：使用 editable 里的onValuesChange属性，但是依然有bug， onValuesChange 函数会在值变化时触发两次，导致弹出两次错误提示

想寻求一个友好方案。

💻 示例代码

<EditableProTable
        columns={columns}
        rowKey="no"
        value={dataSource}
        pagination={pagination}
        scroll={{ x: 'max-content' }}
        onChange={setDataSource}
        recordCreatorProps={false}
        editable={{
          type: 'multiple',
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete];
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList);
            setRecord(record);
            if (record?.purchaseNum < record?.receivedNum) {
              message.error('错误信息');
            }
          },
          onChange: setEditableRowKeys,
        }}
      />

🚑 其他信息

"@ant-design/pro-table": "^2.56.3",

github-actions[bot] commented 2 years ago

以下的 Issues 可能会帮助到你 / The following issues may help you

[#2387][🧐[问题] EditableProTable 编辑模式时，外部form.setFieldsValue更新数据无法映射到EditableProTable][65%]
[#3910][🧐[问题]EditableProTable 可编辑表格新添加一行onSave后如何替代本地临时生成的id？][63%]
[#3414][👑 [需求]EditableProTable 可编辑表格编辑状态下是否可以实现拖拽排序][60%]
[#3326][🧐[问题]EditableProTable - 可编辑表格-怎么表格内处理联动][60%]

drizzlesconsin commented 2 years ago

列 column 加 formItemProps: { rules: [...] }

conviva-zyang commented 2 years ago

遇到了同样的问题：在分步表单中嵌入了一个可编辑表格，此可编辑表格为了实现可以同时添加多行使用了newRecordType：‘ dataSource’。现在想再分步表单点击下一步的时候来校验表格的输入。发现无法实现。给列 column 加 formItemProps: { rules: [...] }，只能在此列onChange的时候触发校验。如果添加了一行，但是没有进行编辑是不会触发校验的。比如最基础的isRequired: true就无法校验。这个在官方例子中也可以复现。 https://procomponents.ant.design/components/editable-table#%E5%AE%9E%E6%97%B6%E4%BF%9D%E5%AD%98%E7%9A%84%E7%BC%96%E8%BE%91%E8%A1%A8%E6%A0%BC

所以期望能在分步表单点击下一步的时候对可编辑表格进行校验。

NanYeYe commented 2 years ago

遇到了同样的问题：在分步表单中嵌入了一个可编辑表格，此可编辑表格为了实现可以同时添加多行使用了newRecordType：‘ dataSource’。现在想再分步表单点击下一步的时候来校验表格的输入。发现无法实现。给列 column 加 formItemProps: { rules: [...] }，只能在此列onChange的时候触发校验。如果添加了一行，但是没有进行编辑是不会触发校验的。比如最基础的isRequired: true就无法校验。这个在官方例子中也可以复现。 https://procomponents.ant.design/components/editable-table#%E5%AE%9E%E6%97%B6%E4%BF%9D%E5%AD%98%E7%9A%84%E7%BC%96%E8%BE%91%E8%A1%A8%E6%A0%BC

所以期望能在分步表单点击下一步的时候对可编辑表格进行校验。

+1 表单提交的时候没法校验到里面的EditableProTable 只能获取到正常输入框的校验错误

chenshuai2144 commented 2 years ago

方案一：使用validator ，但是有bug, 无法正常提示message, 如果直接配置一个message 数据，这样无论输入是否错误都有提示，体验不友好；已知这个bug 得过一段时间才能解决；

这个修掉了，可以再试试了

如果使用了 name="xx" ,并且包裹在了 ProForm 中的话，你可以给 EditableProTable 的formItemProps 配置rules

WuJiY commented 1 year ago

感觉加了rules 频繁操作的时候会删掉部分列的值

ant-design / pro-components