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

  介绍

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

具体代码见贴图

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

<强>反应+蚂蚁设计实现可编辑单元格,添加行并利用形式获取新增数据

<强>实现如下图所示需求:

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

<强>实现功能说明:

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

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

<强>在构造函数内定义:

构造函数(道具){   超级(道具)   这一点。状态={   数据源:[{   关键:0,   name1: & # 39; & # 39;   name2: & # 39; & # 39;   name3: & # 39; & # 39;   },//应用信息化查询方法   数:1//总数   }   }

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

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

<强>在渲染()中定义:

const{形式:{getFieldDecorator},数据源}=5谰?/p>

<强>在返回中添加如下代码:

& lt; div>   & lt;/Form>   & lt; Form.Item>   表& lt;   列={(   {标题:& # 39;名称1 & # 39;,dataIndex: & # 39; name1& # 39;,呈现:文本、记录、指数=比;   & lt;形式。项目关键={指数}比;   {getFieldDecorator (“tableDt[${指数}].name1”) (   & lt;输入占位符=扒胧淙朊?“;/比;   )}   & lt;/Form.Item>   },   {标题:& # 39;名称2 & # 39;,dataIndex: & # 39; name2& # 39;,呈现:文本、记录、指数=比;   & lt;形式。项目关键={指数}比;   {getFieldDecorator (“tableDt[${指数}].name2”) (   & lt;输入占位符=扒胧淙朊?“;/比;   )}   & lt;/Form.Item>   },   {标题:& # 39;名称3 & # 39;,dataIndex: & # 39; name3& # 39;,呈现:文本、记录、指数=比;   & lt;形式。项目关键={指数}比;   {getFieldDecorator (“tableDt[${指数}].name3”) (   & lt;输入占位符=扒胧淙朊?“;/比;   )}   & lt;/Form.Item>   },   ]}   数据源={this.state.dataSource}   分页={假}/比;   & lt;/Form.Item>      & lt;/Form>   & lt;行地沟={16}祝辞   & lt;坳跨度={24}比;   & lt;按钮>//添加应用信息化查询方法行      handleRowAdd=()=比;{   const{计数,数据源}=this.state;   const newData=https://www.yisu.com/zixun/{   关键:计数,   name1:”,   name2:”,   name3:”,   };   this.setState ({   数据源:[…数据源,newData],   数:计数+ 1,   });   }

<强>点击提交操作的方法:

//保存   拯救=()=比;{//处理校验值   this.props.form。validateFields((呃,值)=比;{//console.log(值)   如果(!犯错){//values.tableDt就是个表格数据的数组,可对获取的值进行处理校验处理   }   })   }

<>强实现效果如下:

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

<强>价值。tableDt值如下:

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

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

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