antd 4.x, 实现Table 可编辑 , Table 结合Form.List,实现单独校验Form.List、Form.Item校验

最新推荐文章于 2024-09-05 18:00:20 发布

东湖高新第一会所掌门人

最新推荐文章于 2024-09-05 18:00:20 发布

阅读量5.1k

点赞数 3

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_42359718/article/details/125623254

版权

背景：

需要实现一个这种表格在这里插入图片描述

思路：

1、编辑表格
	antd 有案例	
2、Form.List 嵌套Table

实现

关键点：单行校验怎么传参，单行如何获取值、单行如何重置
注意：我的form 是从外层传进来的、这个没有影响正常在 Form.List 外层加Form 组件包裹就行

import React from 'react'
import { Form, Input, Button, Table, Select, Upload,message } from 'antd'
// import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import UploadFile from '../UploadFile/index'
import { GetCertificate,  SaveCertificate} from '@services/configure/configurationManagement'

const formItemLayout = {
    labelCol: {
        span: 3,
    },
    wrapperCol: {
        span: 24,
    },
} 

const TableEditForm = (props) => {
    // const [form] = Form.useForm()
    const { form} = props


// 单行校验 传参
    const validateForm =(record,field)=>{
        form.validateFields(
            [
                ['CertificateList',field.key,'pemName'],
                ['CertificateList',field.key,'keyName']
            ])
            .then(res=>{
                // 得到单行的数据
            })
            .catch(err=>{
                console.log(err,'dss')
            })
    }

 

    const getColumns = (add, remove) => {
        return [
            {
                title: '域名',
                dataIndex: 'domain',
                render(text, field, index) {
                    // 注意：这里的 field 不是当前行数据，而是 Form.List field
                    return <Form.Item
                        wrapperCol={ { span: 24 } }
                        shouldUpdate
                    >
                        {({ getFieldValue }) => {
                            // 获取当前行数据，然后渲染你要的数据
                            const record = (getFieldValue('CertificateList') || [])?.[index] || {}
                            return  record?.['domain']
                        }}
                    </Form.Item>
                }
            },
            {
                title: '证书（仅支持.pem格式）',
                dataIndex: 'pemName',
                render(text, field, index) {
                    return <Form.Item
                        wrapperCol={ { span: 24 } }
                        name={ [field.name, 'pemName'] }
                        rules={ [{ required: true, message: '请上传证书（仅支持.pem格式）' }] }
                    >
                        <UploadFile />
                    </Form.Item>
                }
            },
            {
                title: '证书秘钥（仅支持.key格式）',
                dataIndex: 'keyName',
                render(text, field, index) {
                    return <Form.Item
                        wrapperCol={ { span: 24 } }
                        shouldUpdate
                        name={ [field.name, 'keyName'] }
                        rules={ [{ required: true, message: '请上传证书秘钥（仅支持.key格式）' }] }
                        // valuePropName="fileList"
                        // getValueFromEvent={normFile}
                    >
                        <UploadFile />
                    </Form.Item>
                }
            },
            {
                title: '过期时间',
                dataIndex: 'expireTime',
                render(text, field, index) {
                    return <Form.Item
                        wrapperCol={ { span: 24 } }
                        shouldUpdate
                    >
                        {({ getFieldValue }) => {
                            const record = (getFieldValue('CertificateList') || [])?.[index] || {}
                            return  record?.['expireTime']
                        }}
                    </Form.Item>
                }
            },
            {
                title: '操作',
                dataIndex: 'operate',
                className: 'operate',
                width: 120,
                render(text, field, index) {
                    // 注意：这里的 field 不是当前行数据，而是 Form.List field
                    return <Form.Item
                        wrapperCol={ { span: 24 } }
                        shouldUpdate
                    >
                        {({ getFieldValue }) => {
                            // 获取当前行数据，然后渲染你要的数据
                            const record = (getFieldValue('CertificateList') || [])?.[index] || {}
                            return <div>
                                <a href="#" key={1} onClick={() => {
                                    form.resetFields(  [
                                        ['CertificateList',field.key,'pemName'],
                                        ['CertificateList',field.key,'keyName']
                                    ])
                                }}> 清空</a>
                                <a href='#' key={2} onClick={() => {
                                    validateForm(record,field)
                                }}> 保存</a>
                            </div>
                        }}
                    </Form.Item>
                }
            }
        ]
    }
 
    return (
        <>
            <Form.List name='CertificateList' {...formItemLayout}>
                { (fields, { add, remove }) => {
                    // 将Table视为 Form.List 中循环的 Form.Item
                    return (
                        <Table
                            dataSource={ fields }
                            columns={ getColumns(add, remove) }
                            rowKey='key'
                            pagination={false}
                        />
                    )
                }}
            </Form.List>
        </>
    )
}
 
export default TableEditForm```