在antd Table中插入可编辑的单元格实例


Posted in Javascript onOctober 28, 2020

最近遇到一个需求,要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件,发现不太灵活,所以自己动手写了一下。

实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是都定义成了同一个变量,后来家里一个动态的后缀。具体代码见贴图

在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中插入可编辑的单元格实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 #Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 #Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 #Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
用js实现放大镜效果
Oct 28 #Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php开发工具有哪五款
2015/11/09 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python操作Access数据库基本步骤分析
2016/09/19 Python
Django的信号机制详解
2017/05/05 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
学期评语大全
2014/04/30 职场文书
党员个人剖析材料
2014/09/30 职场文书
学校食品安全责任书
2015/01/29 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
董存瑞观后感
2015/06/11 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript