ant-design-pro 的EditableProTable表格驗證調用

博客源碼 https://github.com/shengbid/antdpro-demo,有需要可以下載下來看效果

 

EditableProTable默認是在單行保存時調用表單驗證

 

我這里的需求是點擊外部的保存要對整個表單進行驗證

EditableProTable提供了editable屬性,可以設置form

https://procomponents.ant.design/components/editable-table

 

代碼

import React, { useState, useEffect } from 'react'
import { Row, Col, Button, Form, message } from 'antd'
import { EditableProTable } from '@ant-design/pro-table'

const EditZTTable: React.FC = () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])
  const [dataSource, setDataSource] = useState<projectRiskProps[]>([])
  const [editForm] = Form.useForm()

  // 提交方法
  const onSave = async () => {
    await editForm.validateFields() // 調用表單驗證
  }

  return (
    <>
      <EditableProTable
        columns={columns}
        rowKey="id"
        value={dataSource}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          record: () => ({
            id: Date.now(),
          }),
        }}
        editable={{
          type: 'multiple',
          form: editForm,
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete]
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList)
          },
          onChange: (editableKeyss, editableRows: projectRiskProps[]) => {
            setEditableRowKeys(editableKeyss)
            setDataSource(editableRows)
          },
        }}
      />
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button style={{ margin: '15px 8px 0' }} onClick={onCancel}>取消</Button>
          <Button type="primary" onClick={onSave}>保存</Button>
        </Col>
      </Row>
    </>
  )
}
export default EditZTTable