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

2024-09-29 20:03:04

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

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

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

实现如下图所示需求：

实现功能说明：

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

在构造函数内定义：

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

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

在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就是个表格数据的数组，可对获取的值进行处理校验处理
  }
 })
}

实现效果如下：

value.tableDt值如下：

以上这篇在antd Table中插入可编辑的单元格实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

ant design vue嵌套表格及表格内部编辑的用法说明

实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan
vue+element-ui实现表格编辑的三种实现方式

1.表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]. 页面结构代码: <el-table :data="tableData" tooltip-effect="dark" style=&
Antd表格滚动宽度自适应不换行的实例

我就废话不多说了,大家还是直接看代码吧~ <Table className={styles.table} rowKey={(record) => record.key} columns={columns} dataSource={dataSource} scroll={{ x: 'max-content' }} // 加上这条横向滚动支持此属性的浏览器内容就不会换行了 pagination={false} /> styles.less .table { :global { .ant-
解决antd Form 表单校验方法无响应的问题

antd 的表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动
react antd表格中渲染一张或多张图片的实例

使用antd table中显示一张图片,代码如下: const columns = [ { title: "姓名", dataIndex: "name", width: 100 , // table列定宽可不设 fixed: "left" // 固定列的位置 }, { title: "联系电话", width: 150, dataIndex: "phone" }, { title:"显示一张图片
在antd Table中插入可编辑的单元格实例

最近遇到一个需求,要求表格中某一属性是可以手动改变的.看了antd Table 的官方组件,发现不太灵活,所以自己动手写了一下. 实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是都定义成了同一个变量,后来家里一个动态的后缀.具体代码见贴图补充知识:React+Ant Design实现可编辑单元格.添加行并利用form获取新增数据实现如下图所示需求: 实现功能说明: 点击添加按钮,在表
vue 中 elment-ui table合并上下两行相同数据单元格

html : <el-table :header-cell-style="{background:'#6d7f93',color:'white'}" :data="ptableDate" align="center" border v-loading="loading" :height="tableHeight" :span-method="objectOneMethod" >
在Layui中操作数据表格,给指定单元格添加事件示例

最近入坑Layui这个为服务端程序员量身定做的前端框架. 为什么不用vue结合各种流行前端框架Element.iView啊什么,后台大哥们不会啊!!! 只好我来迁就他们呢,还得一点一点儿的学起来. 当我们在操作数据表格的时候,并不是一定要点击表格工具栏中的"查看"按钮,来进行查看,而是点击某一特定的列来进行某些数据查看.例如下图这样. 这就涉及到表格的自定义事件.代码如下: <table id='task-list' lay-filter='task-list'></
基于jQuery的合并表格中相同文本的相邻单元格的代码

ONE 已经生成的数据表格大致内容如下: 地区地区商品代码商品名称数量有效期至距效期(月) 产品批号规格单位条形码广东深圳 00028 红花油广东深圳 00028 红花油广东深圳 00028 红花油广东广州 00027 白花油广东广州 00028 红花油广东深圳 00028 红花油广东
在python中使用xlrd获取合并单元格的方法

处理excel表格的时候经常遇到合并单元格的情况,使用xlrd中的merged_cells的方法可以获取当前文档中的所有合并单元格的位置信息. import xlrd xls = xlrd.open_workbook('test.xls') sh = xls.sheet_by_index(0) 读取excel并读取第一页的内容. for crange in sh.merged_cells: rs, re, cs, ce = crange merged_cells返回的是一个列表,每一个元素是合并
Java中EasyPoi导出复杂合并单元格的方法

前言: 上星期做了一个Excel的单元格合并,用的是EasyPoi,我之前合并单元格都是原生的,第一次使用EasyPoi合并也不太熟悉,看着网上自己套用,使用后发现比原生的方便些,贡献一下,也给其他用到合并而且用的是EasyPoi的小伙伴节省下时间. 导出模板: 坐标: 版本号,自己来定,可以去官网查看:EasyPoi官网  <dependency> <groupId>cn.afterturn</groupId> &l
python实现对excel中需要的数据的单元格填充颜色

前言: 一般处理数据使用的是pandas和numpy库,但是填充单元格颜色需要在excel中,使用的是openpyxl库,所以不能直接达到我们的需求,需要进行两个库的链接使用,先说下openpyxl填充色,pandas是直接读取数据,但是openpyxl则不是,必须要sheet处于active状态,而且必须进行sheet选择才可以读取数据 import openpyxl from openpyxl import load_workbook # 比如打开test.xlsx wb = load_wo
C#在Excel表格中插入、编辑和删除批注

概述为文档添加必要的批注可以给文档使用者提供重要的提示信息,下面的示例中,将介绍通过C#编程语言来给Excel表格中的指定单元格内容添加批注,此外,对于已有的批注,如果需要修改,我们也可以进行编辑或者删除批注.示例内容将包含以下主要内容: 1.插入批注 1.1 插入文本 1.2 插入图片 2.编辑批注 2.1 修改批注内容 2.1 设置批注可见性 3.删除批注工具 Spire.XLS for .NET 8.0 提示:在进行代码操作之前,需下载安装Spire.Xls,并添加引用dll文件,添加
Android 应用中插入广告详解及简单实例

想必大家都知道,国内的Android应用基本都是免费的,那么开发者如何获得收入呢?应用中插入广告是一个比较常用的盈利手段.本文就讲解如何在Android应用中插入广告. 国内的广告平台有很多,用户数量比较多的有万普,有米,多普.下面就不一一介绍了,免得说我打广告.本文以万普为例. 1.首先去万普官网下载sdk,把sdk里面的jar包导入到项目的lib目录下. 2.修改AndroidManifest.xml文件. 确保应用具有以下几项权限: XML/HTML代码 <uses-perm
jquery合并表格中相同文本的相邻单元格

一.效果二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>

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

相关推荐

随机推荐