EditableProTable可編輯表格獲取其他輸入框的值之表單項聯動驗證

使用場景: 當前輸入組件的驗證需要根據其他項的值進行變化

如: 產品分類選擇了必填產品,產品名稱就是必填,如果選擇其他,就不是必填

 

 

 

這里展示兩種校驗

一種是填寫時,輸入組件的驗證,一般是 是否可編輯disable  是否展示isshow等 

另外是點擊提交時,rules校驗,是否通過校驗方法

 

主要是改變columns的值

 

1.選擇框是否可選擇

行業分類如果選擇不可填寫,產品分類不可選

 

const columns: ProColumns<any>[] = [
    {
      title: '序號',
      dataIndex: 'num',
      width: 60,
      editable: false,
      render: (_, record, index) => (
        <span>{index + 1}</span>
      )
    },
    {
      title: '行業分類',
      dataIndex: 'industry',
      width: 130,
      renderFormItem: () => (
        <Select>
          <Option value="1">機械</Option>
          <Option value="2">電子</Option>
          <Option value="3">服務</Option>
          <Option value="4">其他</Option>
          <Option value="5">不可填寫</Option>
        </Select>
      ),
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此項是必填項',
          },
        ],
      },
    },
    {
      title: '產品分類',
      dataIndex: 'productType',
      width: 130,
      renderFormItem: (_, config, data) => { // 這里返回的值與Protable的render返回的值差不多,能獲取到index,row,data 只是這里是獲取對象組,外面會在包一層
        console.log(_, config, data)
        let disabled = false
        if (!config.record || (config.record && config.record.industry === '5')) { // 如果行業未選擇或者選擇不可填寫,產品不能選擇
          disabled = true
        }
        return <Select disabled={disabled}>
          <Option value="1">必填產品1</Option>
          <Option value="2">產品2</Option>
          <Option value="3">產品3</Option>
        </Select>
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此項是必填項',
          },
        ],
      },
    },

    ....
  ]

打印內容

  2.輸入框校驗

  如果產品分類選擇必填產品,產品名稱必填,否則不校驗

const columns: ProColumns<any>[] = [
    {
      title: '產品分類',
      dataIndex: 'productType',
      width: 130,
      renderFormItem: (_, config, data) => {
        console.log(_, config, data)
        let disabled = false
        if (!config.record || (config.record && config.record.industry === '5')) { // 如果行業未選擇或者選擇不可填寫,產品不能選擇
          disabled = true
        }
        return <Select disabled={disabled}>
          <Option value="1">必填產品1</Option>
          <Option value="2">產品2</Option>
          <Option value="3">產品3</Option>
        </Select>
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此項是必填項',
          },
        ],
      },
    },
    {
      title: '產品名稱',
      width: '15%',
      dataIndex: 'productName',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此項是必填項',
            validator: (values) => { // 通過validator自定義校驗規則
              const { field } = values
              console.log(values, field) // field是當前form的key
              // 獲取當前行數據
              const current = editForm.getFieldValue(`${field.split(".")[0]}`) || {}
              if (current.productType === '1' && !current.productName) { // 如果產品分類選擇必填,產品名稱校驗
                return Promise.reject(new Error('產品分類必填'))
              }
              return Promise.resolve()
            }
          }
        ]
      }
    },
  ]

完整代碼

import React,  { useState } from "react";
import { Select, Button, Form } from 'antd'
import type { ProColumns } from '@ant-design/pro-table'
import { EditableProTable } from '@ant-design/pro-table'


const EditTable = () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])
  const [dataSource, setDataSource] = useState<any[]>([])
  const [editForm] = Form.useForm()

  const { Option } = Select
  const columns: ProColumns<any>[] = [
    {
      title: '序號',
      dataIndex: 'num',
      width: 60,
      editable: false,
      render: (_, record, index) => (
        <span>{index + 1}</span>
      )
    },
    {
      title: '行業分類',
      dataIndex: 'industry',
      width: 130,
      renderFormItem: () => (
        <Select>
          <Option value="1">機械</Option>
          <Option value="2">電子</Option>
          <Option value="3">服務</Option>
          <Option value="4">其他</Option>
          <Option value="5">不可填寫</Option>
        </Select>
      ),
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此項是必填項',
          },
        ],
      },
    },
    {
      title: '產品分類',
      dataIndex: 'productType',
      width: 130,
      renderFormItem: (_, config, data) => {
        console.log(_, config, data)
        let disabled = false
        if (!config.record || (config.record && config.record.industry === '5')) { // 如果行業未選擇或者選擇不可填寫,產品不能選擇
          disabled = true
        }
        return <Select disabled={disabled}>
          <Option value="1">必填產品1</Option>
          <Option value="2">產品2</Option>
          <Option value="3">產品3</Option>
        </Select>
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此項是必填項',
          },
        ],
      },
    },
    {
      title: '產品名稱',
      width: '15%',
      dataIndex: 'productName',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此項是必填項',
            validator: (values) => {
              const { field } = values
              console.log(values, field)
              // 獲取當前行數據
              const current = editForm.getFieldValue(`${field.split(".")[0]}`) || {}
              if (current.productType === '1' && !current.productName) { // 如果產品分類選擇必填,產品名稱校驗
                return Promise.reject(new Error('產品分類必填'))
              }
              return Promise.resolve()
            }
          }
        ]
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: 60,
      render: (text, record) => [
        <a
          key="delete"
          onClick={() => {
            setDataSource(dataSource.filter((item) => item.id !== record.id))
          }}
        >
          刪除
        </a>,
      ],
    },
  ]

  const onSave = async() => {
    await editForm.validateFields()
  }

  return (
    <div>
      <h2>可編輯表格,formItem聯動驗證</h2>
       <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: any[]) => {
                setEditableRowKeys(editableKeyss)
                setDataSource(editableRows)
              },
            }}
          />
          <p style={{textAlign: 'right'}}>
            <Button type="primary" onClick={onSave}>保存</Button>
          </p>
    </div>
  )
}

export default EditTable

 

其實這個EditableProTable核心還是form表單,用法與form.list一致,只是樣式是表格樣式,可以先看下form的動態增減表單項介紹

https://ant.design/components/form-cn/#components-form-demo-dynamic-form-items-complex