Antd中Form表单与Table表格联合的简易使用

Form.Item 中使用 valuePropName 来指定子节点的值的属性，例如Table的数据源为dataSource，Switch的数据源是checked
在Table的columns中定义需要表单控制的数据，render返回Form.Item

import { Button, Form, Input, Table } from 'antd'
import React, { useEffect } from 'react'const About: React.FC = (props: any) => {const [form] = Form.useForm()const columns: any = [{title: '姓名',dataIndex: 'name',key: 'name'},{title: '年龄',dataIndex: 'age',key: 'age',render: (text: any, record: any, index: number) => {return (<Form.Item name={['table', index, 'age']}><Input placeholder="请输入年龄" /></Form.Item>)}},{title: '住址',dataIndex: 'address',key: 'address'}]useEffect(() => {form.setFieldsValue({table: [{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'}]})}, [])const onFinish = (values: any) => {console.log(values)// 打印结果/*{table: [{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'}]}*/}return (<Form form={form} onFinish={onFinish}><Form.Item name="table" valuePropName="dataSource"><Table bordered columns={columns} pagination={false} /></Form.Item><Form.Item><Button htmlType="submit" type="primary">Submit</Button></Form.Item></Form>)
}export { About }

Antd中Form表单与Table表格联合的简易使用相关推荐

使用form表单和table表格制作个人简历
使用form表单和table表格制作个人简历制作的如下图: 代码如下: <!DOCTYPE html> <html><head><meta charset= ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
[转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
vue中form表单支持回车键提交踩坑
平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...
antd vue form表单子组件调用父组件的方法没反应_前几天推了Vue，今天给React疯狂打call...
在主流前端框架里,因为React的入门难度高而果断投入Vue怀抱的人绝不在少数.但我要告诉大家,如果你有一定的js基础,其实React没你想象中那么困难任何库都要在「概念简洁」(自由度高)和「使用便 ...
HTML中form表单的应用
1.form表单标记 form表单以<form>标记开始,以</form>标记结束而在form表单中的属性 action 规定当提交表单时向何处发送表单数据. method ...
html中form表单提交和阻止表单提交的细节
如何阻止表单提交 HTML禁止表单提交方法源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...

Antd中Form表单与Table表格联合的简易使用

Antd中Form表单与Table表格联合的简易使用相关推荐

最新文章

热门文章