antd for react table的单元格编辑态不会用，所以在他的基础上造了个轮子

最新推荐文章于 2024-08-17 22:42:26 发布
最新推荐文章于 2024-08-17 22:42:26 发布
阅读量371 收藏 8
点赞数 6
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/B_shuo/article/details/135444784
版权

用户在同一时间只会更新某一列的某一个格子，所以用一个状态保存每个单元格的编辑状态

const [dictReadOrWrite, setDictReadOrWrite] = useState({});

用户row.id + columnName作为key，用于区分行，初始值都是不存在，所以打开表格时，默认显示自己加的div，

给div加点击事件，更新这个单元格的状态，能够显示input，input增加失焦事件和右侧图标的点击事件，用于调用api更新，同时再更新状态隐藏input，渲染div

初学者，不知道这种实现效率怎么样，求个指点

还有，antd的input后缀图标点击时也会触发他的失焦，所有本想有点击+回车的，现在只有回车了

小白啃萝卜
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
antd-editable:从antd继承的React组件，可以编辑单元格表
05-14
一个基于 的 React 组件， 可以编辑表格的内容并实时保存。 Features 行/列可编辑 tab 键切换 自定义表单数据校验 typescript 支持 支持 Select 控件 行/列/单元格禁用 何时使用 当表格涉及到内容的修改的时候...
【antd组件之ProTable，EditableProTable】
小蓝人的博客
01-16 6916
【代码】【antd组件之ProTable，EditableProTable】
antdPro可编辑表格EditableProTable 修改展示数据
Mei_Miao的博客
01-05 1299
想要做批量修改、单个修改的操作时应该使用 editableFormRef。数据源为dataSourse。
react antd EditableProTable - 可编辑表格
L_C_sunny的博客
01-08 1909
【代码】react antd EditableProTable - 可编辑表格。
antd中编辑表格的单元格EditableCell
weixin_46533954的博客
07-26 1113
2.编辑组件一定要放在应用组件APP的外面，保证调用的时候每个单元格和行不会互相影响，这个地方如果放在里面目前遇到的问题：编辑单元格的时候form表单必填的提示会消失，比如第一个单元格修改的时候空着，下面会出现必填提示，第二个修改的时候有数据，失焦的时候第二个是保存成功的，但是同时第一个也默认变成最初的数据也保存成功了，当然正确的表现形式则是第二个失焦，第二个保存成功，第一个依旧是有必填提示的。1.一定按照antd提供的代码格式，编辑的方法这一块放在当前组件的外面。
关于antd vue 中table的单元格单击或者双击某个编辑事件，配合customCell的用法，可以编辑某一个单元格。
m0_73008551的博客
03-11 1859
这里通过单元格点击cellEdit事件的单点事件，触发了cellEdit编辑函数，需要双击修改的可以使用onDblclick事件改为双击。首先看数据格式：这里因为是自己加的行，所以设定了一个随机id，大家可以通过index进行设置key也是可以的。editableDataField：为动态编辑的对象，用来获取某一行，由此确定编辑某一个单元格。contentBeingEdited：为自定义声明的string值，用于获取编辑的是哪一列。需求：动态生成一个单元格，点击生成的某一个单元格可以修改他的text值。
Antd4可编辑单元格.txt
01-12
Ant Design 可编辑单元格，根据antd 3 + antd 4 修改，完全使用状态组件
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
antd-table-react.zip
07-13
这个压缩包 "antd-table-react.zip" 提供了一个示例，演示了如何在 antd 表格中实现首行和首列固定的效果，这对于数据量较大且需要横向和纵向滚动的表格来说尤其有用。下面我们将深入探讨 antd-table 的核心特性、...
antd table 编辑单元格功能
徐同保的专栏
11-01 1291
EditCell.js: import React, { useState, useEffect, useRef } from 'react' import { Popover, Input, Form, Button } from 'antd' import Icon from './Icon' export default function EditCell(props) { const { record, handleEditCell, placement = ...
ant-design-pro的可编辑表格editprotable的遇到的一些小问题
兔子的博客
09-28 585
需求：1、使用可编辑表格实现对某一行表格的数据进行编辑，对输入内容控制必须低于同行某一数据2、解决搜索数据和列名展示不同，和不可编辑的列不展示在搜索框实现效果。
antd ProTable 高级表单实现行编辑表格（能直接用调用接口那种）
今天鸭鸭不想出去玩
12-23 8057
代码全部如下： import React, { useState } from 'react'; import { EditableProTable } from '@ant-design/pro-table'; import ProField from '@ant-design/pro-field'; import { ProFormRadio } from '@ant-design/pro-form'; import ProCard from '@ant-design/pro-card'; import
解决react表格嵌套主表和子表都可以新增、编辑、保存、删除
ask_baidu的博客
01-05 1321
作者查阅资料，花了几天时间，解决了多个问题。现分享出来，供大家参考。支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。（包含组件，不包含store）使用后端数据可以把测试数据删除，修改有store的地方，后端返回json，支持分页等。index.js 里有测试数据。
可以编辑的table antd
fred8的博客
05-23 935
效果图 代码 import React, { Component } from "react"; import { Form, Input, Button, Table, Divider, Popconfirm, Tooltip } from 'antd'; import "./targetform.less"; class TargetForm extends Component { state = { targetIp: this.props.targetIp,
antdPro中EditableProTable可编辑表单编辑行配置可变下拉框选项和赋值其他字段
KisJLLLLLL的博客
12-04 1471
EditableProTable根据上一个下拉框选择的人物来进行对后一个下拉框选项进行变更，并在选中某个人后通过接口对后面的两个字段进行赋值，一开始是准备在onChange中改变下拉框中的options配置，colums中的renderFormItem来自定义字段，并且在点击单位名称的时候来通过useMemo进行对负责人下拉选项的重新渲染，和在负责人中获取整个表单数据并且进行重新替换赋值。但是不同字段赋值是可以在columns中通过onChange中的hooks来进行双向绑定进行赋值。
react antd 可编辑行的一些解读
erose的博客
05-17 816
import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Table, Input, InputNumber, Popconfirm, Form, Typography } from 'antd'; const originData = []; //赋值 for (let i = 0; i &l
EditableProTable(可编辑表格) 之坑
m0_58293192的博客
04-24 2825
EditableProTable(可编辑表格) 之坑
React + Vite项目别名配置
最新发布
站在顶峰看星星
08-17 162
数组形式：Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>由上图我们发现，我们虽然配置了别名，但是vscode并没有给出提示，那就意味着别名没有生效。对象形式：Record<string, string>因此我们需要手动创建。
在react和antd下，怎么使用table组件的summary统计另一个接口传回来的数据
06-09
要使用antd的table组件来统计另一个接口传回来的数据，你需要进行以下步骤： 1. 在你的组件中，引入table组件并在需要的地方使用。 ``` import { Table } from 'antd'; <Table /> ``` 2. 在table组件中，设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值