介绍
今天就跟大家聊聊有关实现在antd表中插入可编辑的单元格的方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
具体代码见贴图
<强>反应+蚂蚁设计实现可编辑单元格,添加行并利用形式获取新增数据强>
<强>实现如下图所示需求:强>
<强>实现功能说明:强>
点击添加按钮,在表格中添加新的空白行(如下图所示),在点击提交的时候获取空白行的数据
<强>在构造函数内定义:强>
构造函数(道具){ 超级(道具) 这一点。状态={ 数据源:[{ 关键:0, name1: & # 39; & # 39; name2: & # 39; & # 39; name3: & # 39; & # 39; },//应用信息化查询方法 数:1//总数 } }
注:如果数据源定义为空数组,则页面初始化时表格没有输入框,需要点击添加行,如下图
<强>在渲染()中定义:强>
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就是个表格数据的数组,可对获取的值进行处理校验处理 } }) }<>强实现效果如下:强>
<强>价值。tableDt值如下:强>
看完上述内容,你们对实现在antd表中插入可编辑的单元格的方法有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
实现在antd表中插入可编辑的单元格的方法