• 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的动态增减表单项介绍
  • 相关阅读:
    SQL优化,解决系统运行效率瓶颈
    C#中 哪些是值类型 哪些是引用类型
    C#异常类相关总结
    对象 序列化 字节流 传输
    给数组中的每个元素赋值
    对象转化为 xml字符串
    .NET BETWEEN方法
    Datatable To List<Entity>
    ajax原理
    gulp记录
  • 原文地址:https://www.cnblogs.com/steamed-twisted-roll/p/15033537.html
Copyright © 2020-2023  润新知