在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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
js解决movebox移动问题
Mar 29 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
Vue渲染过程浅析
Mar 14 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
vue实现扫码功能
Jan 17 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php操作xml
2013/10/27 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
详解js中==与===的区别
2017/01/08 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Django之form组件自动校验数据实现
2020/01/14 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
python实现简单猜单词游戏
2020/12/24 Python
详解Python中的文件操作
2021/01/14 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
取保候审保证书
2014/04/30 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
主持人开幕词
2015/01/29 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python