EditableProTable可编辑表格获取其他输入框的值之表单项联动验证

使用场景: 当前输入组件的验证需要根据其他项的值进行变化

如: 产品分类选择了必填产品,产品名称就是必填,如果选择其他,就不是必填

 

 

 

这里展示两种校验

一种是填写时,输入组件的验证,一般是 是否可编辑disable  是否展示isshow等 

另外是点击提交时,rules校验,是否通过校验方法

主要是改变columns的值

1.选择框是否可选择

行业分类如果选择不可填写,产品分类不可选

 

const columns: ProColumns<any>[] = [
    {
      title: '序号',
      dataIndex: 'num',
       60,
      editable: false,
      render: (_, record, index) => (
        <span>{index + 1}</span>
      )
    },
    {
      title: '行业分类',
      dataIndex: 'industry',
       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',
       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',
       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: '产品名称',
       '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',
       60,
      editable: false,
      render: (_, record, index) => (
        <span>{index + 1}</span>
      )
    },
    {
      title: '行业分类',
      dataIndex: 'industry',
       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',
       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: '产品名称',
       '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',
       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