react 入坑学习(三)ANTD Form 读取其中Table数据

news/2024/7/11 1:16:31 标签: javascript, es6, reactjs, ant

ANTD Form 读取其中Table数据

首先将table中的数据保存起来,我这里使用了selectRoleRow来保存。
form.item 里的name 可以先不定义

javascript">let selectRoleRow=[];
rowSelection={{
          onChange: (selectedRowKeys, selectedRows) => {
            selectRoleRow=selectedRows;
          },
        }}

然后是我们的Form

javascript"><Form
      name="register"
      layout="horizontal"
      scrollToFirstError
      onFinish={onFinish}
    >
      <Form.Item
        name="userId"
        label="员工号"
        rules={[
          {required: true,
            message: 'Please input your id!',},
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="userName"
        label="姓名"
        rules={[
          {required: true,
            message: 'Please input your name!', },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item label="用户角色" values={selectRoleRow}>
        <Table 
        Checkbox 
        rowSelection={{
          onChange: (selectedRowKeys, selectedRows) => {
            selectRoleRow=selectedRows;},}}
        columns={rolecolumns} 
        dataSource={roletabledata} 
        />
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            新增
          </Button>
          <Button type="primary">
            取消
          </Button>
      </Form.Item>
    </Form>

接着在Form的onFinish方法中,加入我们的table数据

javascript">const onFinish = values => {
    let formvalue=new Object();
    formvalue.roles=selectRoleRow;
    formvalue.userId=values.userId;
    formvalue.userName=values.userName;
    console.log('Received values of form: ', formvalue);
  };

这样就可以将Form 中Table里的数据读出来了,如果有个更好的方法,欢迎讨论。


http://www.niftyadmin.cn/n/1485450.html

相关文章

在objc中使用struct

在java中&#xff0c;向方法中传递复杂参数&#xff0c;一般使用对象来传递。因为这样便于扩展。不需要改变方法的声明部分。 在objc中&#xff0c;开始是发送多个参数。这样很麻烦。那么可以用到c里面的方式来做&#xff0c;通过struct传递参数。把相关的参数写在一个struct里…

设计一个小型的物联网应用系统_物联网应用设计需注意的连接器要求

物联网(IoT)专家认为&#xff0c;只有基于无线通信系统的改变星球般的技术才能发IoT的全部潜力。尽管肯定有大量的IoT节点将由电池供电并以无线方式连接&#xff0c;但是仍然有很大一部分IoT系统将从通过电缆连接的传感器的使用中受益。对于负责设计和实施IoT网络的人员来说&am…

git提交代码出错No partially staged files found记录

git 提交代码时报错 今天提交代码时报错了 Stashing changes… [started] Stashing changes… [skipped] → No partially staged files found… Running tasks… [started] Running tasks for **/.less [started] Running tasks for **/. 方法一 在网上查了好久才发现 git…

python字符串_Python 字符串

字符串是 Python 中最常用的数据类型。我们可以使用引号(或")来创建字符串。创建字符串很简单&#xff0c;只要为变量分配一个值即可。例如&#xff1a;var1 Hello World!var2 "Python Runoob"Python访问字符串中的值Python不支持单字符类型&#xff0c;单字符…

react 入坑学习(四)修改Umi的菜单宽度

修改Umi的菜单宽度 先用网页查看器选中要改的整个菜单 找到对应的class&#xff0c;我这里是ant-pro-sider-menu-sider 然后再global.less中添加该元素&#xff0c;并编辑我们的width&#xff0c; 再刷新&#xff0c;发现依然没有改变&#xff0c;是因为内联的权限较高&am…

TOAD常用快捷键

现在在企业中&#xff0c;操作oracle数据库的客户端&#xff0c;除了PL/SQL外&#xff0c;使用的较多的就是TOAD了&#xff01; 为此&#xff0c;我在网上搜索了下&#xff0c;整理了些简单TOAD的使用技巧&#xff0c;现分享给大家。 常用快捷键&#xff1a; F8 调出以前执行的…

hihocoder-1732-1-偏差排列

hihocoder-1732-1-偏差排列 #1732 : 1-偏差排列 时间限制:10000ms单点时限:1000ms内存限制:256MB描述 如果一个1~N的排列P[P1, P2, ... PN]中的任意元素Pi都满足|Pi-i| ≤ 1&#xff0c;我们就称P是1-偏差排列。 给定一个N&#xff0c;请你计算一共有少个不同的排列是1-偏差排…

react 入坑学习(五)ANT table 设置默认选中行

ANT table 设置默认选中行 查了一个上午&#xff0c;搜到的全是很久之前的checked,defaultChecked啥的全是很久之前的版本了&#xff0c;然后仔细看了看文档&#xff0c;&#xff08;官网的服务器太差了&#xff0c;这几天老是访问不了&#xff09; 附加一个官网镜像 现在改成…