Antd Table editable 状态 在 鼠标 hover 编辑行的时候，render 函数触发异常

最新推荐文章于 2024-03-17 19:43:50 发布
最新推荐文章于 2024-03-17 19:43:50 发布
阅读量4.7k 收藏 2
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42348464/article/details/123086747
版权

项目技术 ： react + antd

使用 antd 的可编辑表格 时遇到个问题，点击编辑之后，如果鼠标一直在当前编辑的这一行 hover，不移动到当前行之外，那么这一行的所有单元格 的 render 不会重新触发。

翻看 antd 文档发现可以使用 shouldCellUpdate 这个函数来使单元格强制刷新，

 

 强制 shouldCellUpdate 返回 true 之后，点击编辑单元格即可变为编辑状态。

伟大的渺小C
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd-editable:从antd继承的React组件，可以编辑单元格表
05-14
如需禁用某行的可编辑，只需要在传入 dataSource 里设置对应行的 editable 为 false。 每一次输入框失焦后，会在组件内部保存一个新的 dataSource ，可以传入一个 onCellChange 的回调函数用于捕获这个实时的 ...
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
Ant Design的Table组件去除
01-18
在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。 首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。 官方栗子 import React, { useEffect, useState } from 'react'; import { Table } from 'antd' export default () => { const [data, setData] = useState([ { key: '1', name: 'Jo
[Swift]一个简单结构的项目demo
Gamin
02-27 3095
这是用Swift创建的一个结构简单的空项目，用来熟悉一下语法。 内容大致包括： 1.引导页 2.tabBarController 3.首页切换childViewController 4.模态弹出控制器 Github:https://github.com/Gamin-fzym/SimpleStructDemo 下面进行代码备份 目录 AppDelegate GARootTabBarCont...
基于antd Table封装表格性能优化
最新发布
CHANCE_wqp的博客
03-17 1053
表格组态配置存于 columns 中，需识别校验相关配置项，调用 initRules 方法以行构建校验规则校验规则 Rules 对象类型如下，主要需要 type 表示字段类型，async-validator 会依据 type 决定自定义校验逻辑，比如 number 类型对于非数值的值就会校验失败。required 表示必填，当字段值为空时检验失败。message 自定义校验提示信息。validator 自定义校验规则，覆盖自定义校验规则。对dataSource的校验会按照行数据，一行一行的进行。
Dynamic Table View Cell Height and Auto Layout
happyrabbit456的专栏
11-03 1398
If you wanted to create a customized table view complete with dynamic table view cell height in the past, you had to write a lot of sizing code. You had to calculate the height of every label, image v
antd4中form表单shouldUpdate的用法
caimingxian401的博客
06-02 7822
效果如下：(左右点击切换，展示隐藏的部分) react中用form表单提交，要实现上图的效果，通常写法如下： <Form.Item label="设备价格" shouldUpdate={(pre: any, cur: any) => pre.price !== cur.price} > { ({ getFieldValue }) => { ...
AntDesign——TableAPI学习
BJERGSEN的博客
06-12 1113
table表格用于展示数据。
antd中编辑表格的单元格EditableCell
weixin_46533954的博客
07-26 846
2.编辑组件一定要放在应用组件APP的外面，保证调用的时候每个单元格和行不会互相影响，这个地方如果放在里面目前遇到的问题：编辑单元格的时候form表单必填的提示会消失，比如第一个单元格修改的时候空着，下面会出现必填提示，第二个修改的时候有数据，失焦的时候第二个是保存成功的，但是同时第一个也默认变成最初的数据也保存成功了，当然正确的表现形式则是第二个失焦，第二个保存成功，第一个依旧是有必填提示的。1.一定按照antd提供的代码格式，编辑的方法这一块放在当前组件的外面。
【antd组件之ProTable，EditableProTable】
小蓝人的博客
01-16 6248
【代码】【antd组件之ProTable，EditableProTable】
Antd Table 可编辑表格
热门推荐
知之为知之，不知为不知
11-21 1万+
antd Table 官方文档提及了 可编辑单元格、可编辑行，这里解决可编辑表格；主要思路是将antd Table可编辑行 与antd Form.List 相结合；表格内编辑；可编辑单元格；可编辑行；简单易理解 ​
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
table动态添加行并编辑
09-12
table动态添加行并进行行数据编辑，数据修改等操作，动态操作table
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
使用阻塞式队列处理大数据
weixin_30344995的博客
01-27 346
前言我们都知道，JAVA对于文本文件在读时是独占的，即使可以用多线程去读也涉及到一个POS（定位读）的问题，这在设计框架上会带来许多的复杂性，同时也带来代码上的不可维护性以及会经常出一些千奇百怪的错误（多线程程序由其如此）。传统阻塞式做法的敝病特点：多线程，阻塞式导入缺点：阻塞式，导入速度慢，线程状态无法精确记录，速度慢内存开销大优秀的做法多线程非阻塞式内存开销恒定线程可以自由增加我们将采用的...
iOS开发-beginUpdates && endUpdates用法
Lotheve的私房菜
03-27 1万+
本篇主要介绍使用beginUpdates和endUpdates方法对UITableView的Cell进行批量操作更新。
UltraGrid
weixin_30314793的博客
12-08 687
1。动态加载button，checkbox,dropdrow等控件。 ultraGrid1.DisplayLayout.Bands[0].Columns["button"].Style=Infragistics.Win.UltraWinGrid.ColumnStyle.Button; ColumnStyle是列样式，它是个枚举类型，里面是各种常用的类型,Tri...
antd table 编辑行
06-07
可以通过 `antd` 的 `Table` 组件的 `editable` 和 `onSave` 两个属性来实现编辑行的功能。 首先，需要在 `Table` 组件中设置 `editable` 属性为 `true`，来开启编辑行的功能： ```jsx <Table dataSource={dataSource} columns={columns} rowKey="id" editable={{ type: 'single', onSave: handleSave, }} /> ``` 其中，`type` 属性可以设置为 `single` 或 `multiple`，分别表示单行编辑和多行编辑。 然后，需要在 `Table` 组件中设置 `onSave` 属性，来处理保存编辑行的逻辑： ```jsx const handleSave = async (rowKey, rowData) => { const newData = [...dataSource]; const index = newData.findIndex((item) => rowKey === item.id); const item = newData[index]; newData.splice(index, 1, { ...item, ...rowData }); setDataSource(newData); }; ``` 在上述代码中，我们首先复制原来的数据源 `dataSource`，然后找到要编辑的行在数据源中的位置 `index`，将编辑后的数据 `rowData` 合并到该行数据 `item` 中，最后用更新后的数据源更新 `Table` 组件。 完整代码如下： ```jsx import { Table } from 'antd'; const columns = [ { title: 'ID', dataIndex: 'id', }, { title: 'Name', dataIndex: 'name', editable: true, }, { title: 'Age', dataIndex: 'age', editable: true, }, ]; const dataSource = [ { id: '1', name: 'John Brown', age: 32, }, { id: '2', name: 'Jim Green', age: 42, }, { id: '3', name: 'Joe Black', age: 23, }, ]; const App = () => { const [dataSource, setDataSource] = useState(dataSource); const handleSave = async (rowKey, rowData) => { const newData = [...dataSource]; const index = newData.findIndex((item) => rowKey === item.id); const item = newData[index]; newData.splice(index, 1, { ...item, ...rowData }); setDataSource(newData); }; return ( <Table dataSource={dataSource} columns={columns} rowKey="id" editable={{ type: 'single', onSave: handleSave, }} /> ); }; export default App; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值