实现在antd Table中插入可编辑的单元格的方法

发布时间:2020-10-29 21:18:00 作者:Leah
来源:亿速云 阅读:2653

今天就跟大家聊聊有关实现在antd Table中插入可编辑的单元格的方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

具体代码见贴图

实现在antd Table中插入可编辑的单元格的方法

补充知识:React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据

实现如下图所示需求:

实现在antd Table中插入可编辑的单元格的方法

实现功能说明:

点击添加按钮,在表格中添加新的空白行(如下图所示),在点击提交的时候获取空白行的数据

实现在antd Table中插入可编辑的单元格的方法

在构造函数内定义:

constructor(props) {
 super(props)
 this.state = {
  dataSource:[{
   key: 0,
   name1: '',
   name2: '',
   name3: '',
  }],//应用信息化查询方法
  count:1,//总数
 }
}

注:如果dataSource定义为空数组,则页面初始化时表格没有输入框,需要点击添加行,如下图

实现在antd Table中插入可编辑的单元格的方法

在render()中定义:

const { form: { getFieldDecorator },dataSource } = this.props

在return中添加如下代码:

<div>
</Form>
<Form.Item>
   <Table 
    columns={[
     { title: '名称1', dataIndex: 'name1',render: (text, record, index) => 
      <Form.Item key={index}>
       {getFieldDecorator(`tableDt[${index}].name1`)(
        <Input placeholder="请输入名称1" /> 
       )}
      </Form.Item>
     },
     { title: '名称2', dataIndex: 'name2',render: (text, record, index) => 
      <Form.Item key={index}>
       {getFieldDecorator(`tableDt[${index}].name2`)(
        <Input placeholder="请输入名称2" /> 
       )}
      </Form.Item>
     },
     { title: '名称3', dataIndex: 'name3',render: (text, record, index) => 
      <Form.Item key={index}>
       {getFieldDecorator(`tableDt[${index}].name3`)(
        <Input placeholder="请输入名称3" /> 
       )}
      </Form.Item>
     },
    ]}
    dataSource={this.state.dataSource}
    pagination={false}
   />
  </Form.Item>

 </Form>
 <Row gutter={16}>
  <Col span={24}>
   <Button onClick={ this.save } type="primary">提交</Button>
   <Button onClick={ this.toback }>返回</Button>
   <span className="tips">{this.state.saveTipCont}</span>
  </Col>
 </Row>
</div>

点击添加行按钮的操作方法:

//添加应用信息化查询方法行

handleRowAdd = () => {
 const { count, dataSource } = this.state;
 const newData = {
  key: count,
  name1: '',
  name2: '',
  name3: '',
 };
 this.setState({
  dataSource: [...dataSource, newData],
  count: count + 1,
 });
}

点击提交操作的方法:

//保存
save = () => {
 //处理校验值
 this.props.form.validateFields((err, values) => {
  // console.log(values)
  if(!err){
   // values.tableDt就是个表格数据的数组,可对获取的值进行处理校验处理
  }
 })
}

实现效果如下:

实现在antd Table中插入可编辑的单元格的方法

value.tableDt值如下:

实现在antd Table中插入可编辑的单元格的方法

看完上述内容,你们对实现在antd Table中插入可编辑的单元格的方法有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. Python Print实现在输出中插入变量的例子
  2. HTML入门有哪些实操例子

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

antd table nt %d

上一篇:superset在linux和windows下的安装和部署的方法

下一篇:使用Android实现图片点击放大效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》