antd-react的EditableTable可编辑表格问题

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

**

使用Form表单包裹EditableTable可编辑表格问题

**

最近公司有一个需求,在添加功能中使用表单填写数据,并且还需要嵌套一个表格,表格为可编辑,一开始的时候不知道怎么下手,后面发现高级组件的可编辑表格组件,于是立马上手,但是其中碰到了几个问题
在这里插入图片描述

可编辑表格的渲染问题

  1. 点击编辑回显数据有问题,只是单纯的输入框没问题,但是如果是使用了valueEnum所对应的数据就有问题了,或者使用了复选框同样回显的时候有问题,还是先贴下问题前的代码在这里插入图片描述在这里插入图片描述
    上面这两张图就是使用valueEnum对应的数据和使用valueType为复选框时候的数据回显问题
    为方便大家能看懂我还是贴下可编辑表格的代码吧
    在这里插入图片描述在这里插入图片描述
    下面这张图片是点编辑的时候需要回显的操作
    在这里插入图片描述
    只需要看setEditableRowKeys这段代码以及后面的就可以了,这部分操作是从接口拿到数据后要渲染的,可编辑表格数据的渲染需要指定key这个字段才能渲染对应的数据

  2. 上面代码图贴完了,接下来说说第一点提到的问题,后面在官网找到了表格列的renderFormItem表单项是可以自定义组件的,value和onChange事件是默认会传给你自定义的组件,value就是组件返回的值,onChange就是改变这个值的方法在这里插入图片描述在这里插入图片描述
    下面我贴出自己写的代码
    在这里插入图片描述这个列其实就是一个下拉框选项,我传入了自己自定义组件,也就是在renderFormItem里面返回的那个组件
    在这里插入图片描述上面这个图片就是我自定义组件的代码,可以看到最上面那个接口声明的数据类型里面的value和onChange就是默认传过来的,只需要在这里接收一下,至于isDetails这个字段是我额外传下来的部分,最后在函数组件里面通过pros解构出传过来的值
    在这里插入图片描述返回出来的代码也就是一个选择框组件,把value和onChange都绑定上即可;

    同样的再演示一下复选框回显的代码解决方案
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    这部分代码其实就和上面那个选择框一样的,只不过变成了复选框而已
    现在这个问题就解决了

  3. 第二个问题就是在给可编辑表格添加一列或者删除一列然后保存整个表单数据的时候可编辑表格的数据会丢失,这个问题想了很久,后面在官网发现要使用高级表单包裹可编辑表格才没有问题,我之前使用的是普通表单包裹,原因是因为表单的每一项它是会整个重新渲染,修改其中的一项会把之前的数据给清空,具体原理我也不是很清楚…还是自己太菜了
    在这里插入图片描述现在就是用高级表单包裹起来了,数据就不会有问题了

以上这些就是所有问题了,有什么问题都可以提出来家人们!

黄子宸.
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React-editable-table:从头开始React可编辑表格
04-19
React可编辑的员工表（数据表） 这个项目是使用任何外部模块（例如react-data-grid，react-datasheet等）从头开始创建的。 特征 在一张桌子中查看所有员工 编辑所需的单元格（内联编辑） 将任何行标记为已删除 撤消删除操作 获取更新的（如果任何属性与初始值不同）雇员的列表。 如果任何单元格的值均已更改，但随后又恢复为先前的值，则不会假定此员工为已更新。 获取标记为已删除的员工列表。 如果已更新员工，然后将其标记为已删除，则该员工将保留在已删除列表中。 重置数据（将所有更改返回到初始状态） 通过单击“提交数据”按钮查看更新和删除的员工的JSON数据 下载JSON数据 搜索功能 基本验证（日期，电话号码验证等） 分页 好好享受！ :vulcan_salute: :raising_hands:
antd-editable:从antd继承的React组件，可以编辑单元格表
05-14
可编辑表格(React hooks) 一个基于 的 React 组件， 可以编辑表格的内容并实时保存。 Features 行/列可编辑 tab 键切换 自定义表单数据校验 typescript 支持 支持 Select 控件 行/列/单元格禁用 何时使用 当表格涉及到内容的修改的时候 如何使用 安装 $ yarn add antd-editable 使用 默认已经开启所有的单元格可编辑。如需禁用某列的可编辑，只需要在传入 columns 里设置对应列的 editable 为 false。 如需禁用某行的可编辑，只需要在传入 dataSource 里设置对应行的 editable 为 false。 每一次输入框失焦后，会在组件内部保存一个新的 dataSource ，可以传入一个 onCellChange 的回调函数用于捕获这个实时的 dataSource 用于一些类似
react antd EditableProTable - 可编辑表格
L_C_sunny的博客
01-08 1979
【代码】react antd EditableProTable - 可编辑表格。
antd-editabletable：基于Ant Design的高性能可编辑表格组件
最新发布
gitblog_00247的博客
08-07 543
antd-editabletable：基于Ant Design的高性能可编辑表格组件 editable-table项目地址:https://gitcode.com/gh_mirrors/ed/editable-table 一、项目介绍 antd-editabletable 是一款基于 Ant Design v4.x 的高效可编辑表格组件库，专为处理大量数据而设计，确保在拥有400个以下表单项时能...
探索高性能的可编辑表格：antd-editabletable
gitblog_00420的博客
08-06 524
探索高性能的可编辑表格：antd-editabletable editable-table项目地址:https://gitcode.com/gh_mirrors/ed/editable-table 在现代Web开发中，表格组件是数据展示和交互的核心。antd-editabletable 是一个基于 antd 4.x 的高性能可编辑表格组件，它提供了丰富的功能和灵活的配置选项，使得开发者能够轻松地...
AntD 可编辑行表格
YUSIR 完美CODING世界
03-13 2641
本地数据代码模板自用,官网例子改改 // 编辑行的自定义表格 import React, { useState } from "react"; import { Table, Input, InputNumber, Popconfirm, Form, Typography, Divider, } from "antd"; interface Item { key: string; name: string; age: number; address: str
Antd Table 可编辑表格
热门推荐
知之为知之，不知为不知
11-21 1万+
antd Table 官方文档提及了 可编辑单元格、可编辑行，这里解决可编辑表格；主要思路是将antd Table可编辑行 与antd Form.List 相结合；表格内编辑；可编辑单元格；可编辑行；简单易理解 ​
wumu-edit-table：一个轻量的无依赖的react可编辑表格（react edit-table）
weixin_44197210的博客
05-24 152
a simple react edit table
antd 实现可编辑表格项
qq_59911037的博客
10-23 671
分两个页面，第一个定义编辑状态下得输入框，第二个定义表格及状态，通过columns向下传递，这样可以单独编辑该列中得单项数据，大概得东西都加了，缺得自己补下，有问题可交流。
基于 React + AntDesign4.x 实现的可编辑表格，可满足大部分使用场景
欢迎光临
01-25 3816
可编辑任意单元格，单元格类型可选：输入框、单选框、下拉列表、分组下拉列表 属性列表 参数 说明 类型 默认值 style 覆盖样式 Object {} columns 表格列 Array [] onChange 单元格内容修改回调 function(Object) - isAddRow 是否允许新增行 boolean true isDeleteRow 是否允许删除行 boolean true isSelectRows 是否显示勾选框 boolean true isSe
react-editable-form-element：用于react的可编辑表单元素
02-14
React可编辑的形式元素
editable-react-table:构建类似于数据库的 React 表
08-03
可编辑的React表 特征 调整列大小 单元格数据类型 - 数字、文本、选择 重命名列标题 按单个列排序 在列的左侧或右侧添加列 添加列到末尾 编辑单元格中的数据 添加新的数据行 删除列 更改列数据类型 为 select 类型的单元格添加选项 入门 克隆这个存储库。 git clone https://github.com/archit-p/editable-react-table 安装依赖项并构建。 npm install npm start 贡献 欢迎投稿！ 随意从下面的路线图中选择一个项目或打开一个新问题！ 路线图 支持虚拟化行 日期数据类型 多选数据类型 复选框数据类型 动画下拉菜单 性能 - 支持 100000 行
推荐：可编辑React表格——数据管理的新伙伴
gitblog_00098的博客
05-19 492
推荐：可编辑React表格——数据管理的新伙伴 editable-react-tableReact table built to resemble a database.项目地址:https://gitcode.com/gh_mirrors/ed/editable-react-table 在现代Web开发中，高效的数据展示和编辑是关键任务之一。今天，我们向您推荐一个强大的开源项目——Editab...
React使用antd实现可编辑单元格
见贤思齐焉，见不贤内自省
02-09 4083
React使用antd实现可编辑单元格
Antd表格组件(table)可编辑单元格使用
qq_45467707的博客
12-03 3933
** Antd表格组件(table)可编辑单元格使用 ** export default function Category() { const [category, setcategory] = useState([]) useEffect(() => { axios.get('/userList/getNewsCategory').then(response => { const {data: {data}} = response setcategor
antd React 实现可编辑表格(v1)
localhost
10-19 2217
在项目中遇到了很多可编辑表格,这里做个总结: 先说第一种实现方式: antd自带的可编辑表格进行改进 代码如下: import React, { useContext, useState, useEffect } from 'react'; import { Table, Input, Popconfirm, Form, Tooltip, Select, DatePicker, TimePicker, } from 'antd'; import moment fro
Antd新增、修改的可编辑表格
RuiKe的博客
06-15 1万+
import React, { PureComponent } from 'react'; import { Form, Table, InputNumber } from 'antd'; export default class DTable extends PureComponent { changeInput = (record, value) => { const {...
antd React 实现可编辑表格(v3)
localhost
10-19 909
简化版本: import React, { useState, useEffect } from 'react'; import { Table, Input, Select, Space, Tooltip } from 'antd'; import styler from './index.less'; const getHash = (len) => { let length = Number(len) || 8; const arr = 'ABCDEFGHIJKLMNOPQRST
antd-design-vue 表格 自适应高度
09-06
要实现 antd-design-vue 表格的自适应高度，可以通过以下步骤： 1. 首先，我们需要在表格组件的外层容器中设置固定的高度或者最小高度，例如设置 `style="height: 300px;"`。这个高度可以根据实际需求进行调整。 2. 然后，在表格组件中，通过设置 `scroll` 属性来实现自适应高度。`scroll` 属性是一个对象，其中包括 `x` 和 `y` 两个属性。我们只需要设置 `y` 属性即可。 例如： ``` <template> <div style="height: 300px;"> <a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 'calc(100vh - 380px)' }"></a-table> </div> </template> ``` 在上述代码中，我们使用 `calc()` 函数来计算表格的高度，其中 `100vh` 表示窗口可视区域的高度，`380px` 表示表格外部容器的上下边距和分页器等组件的高度。根据实际情况，你可以调整这个计算表达式。 通过以上步骤，我们可以实现 antd-design-vue 表格的自适应高度。当表格内容超过设置的高度时，会出现纵向滚动条，从而确保表格的高度适应容器大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值