EditableProTable - 可编辑表格对列作校验

最新推荐文章于 2023-10-20 09:39:59 发布
最新推荐文章于 2023-10-20 09:39:59 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： AntdPro 文章标签： 前端框架 前端 react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_69927213/article/details/127965841
本文介绍了一种在可编辑表格中实现列内容校验的方法，通过在columns中使用formItemProps属性并设置rules来实现类似表单的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、问题的描述

  • 希望对可编辑表格的列作校验

二、正常的预期是什么？

能够对列的内容输入进行校验，实现类似表单一样的效果

三、问题的解决方案

正常情况下做校验

 

需要在columns中使用到 formItemProps 属性，使用rules编写校验规则

动态渲染时做校验 

 

这里的headList存放着的是组装后的columns，用法与正常情况相同，添加 formItemProps 属性即可 

 

 

 

Ant-Design-Pro中：EditableProTable在ProForm保存时一并验证EditableProTable中每条数据的规则是否满足
Iversons.Tian的博客
04-28 7037
注：EditableProTable默认是在单行保存时调用表单验证，如下图： 现在项目有个需求：是点击EditableProTable外部的保存按钮对整个表单进行验证，实现效果如下： 思路如下： EditableProTable提供了editable属性，可以设置form属性：官网地址 实现代码如下，复制可直接运行）： import React, { useState, } from 'react'; import { FooterToolbar, } from '@ant-desi
table添加一行且可编辑 vue_在antd Table中插入可编辑的单元格实例
weixin_39599097的博客
12-19 2829
最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图补充知识：React+Ant Design实现可编辑单...
EditableProTable 正则校验
dongxingxxx的博客
04-06 1564
可编辑表格添加输入校验
EditableProTable添加一行校验
weixin_35755640的博客
02-13 515
可以使用第三方库来为 EditableProTable 添加一行校验。例如，可以使用 "antd" 库中的 "Form" 组件，并在每一行的单元格中使用 "Form.Item" 进行校验。 以下是一个简单的示例代码： import { Form, Input } from 'antd'; const EditableContext = React.createContext(); const ...
antd EditableProTable 如何修改校验样式
chenxiaoyi0207的博客
11-23 1938
组件库地址：https://procomponents.ant.design/components/editable-table 一、默认校验错误样式 1.效果图 2.对应代码columns中“活动名称”的配置项 { title: '活动名称', dataIndex: 'title', width: '30%', formItemProps: { rules: [ { required: true, whitespace: true,
antdPro编辑表格(EditableProTable)线上校验出错样式异常
名人卷耶
09-20 1822
antdPro编辑表格(EditableProTable)线上校验出错样式异常
antd-editable:从antd继承的React组件，可以编辑单元格表
05-14
可编辑表格(React hooks) 一个基于 的 React 组件， 可以编辑表格的内容并实时保存。 Features 行/列可编辑 tab 键切换 自定义表单数据校验 typescript 支持 支持 Select 控件 行/列/单元格禁用 何时使用 当...
不对我说的是编辑表格内部的form使用
最新发布
03-20
嗯，用户之前问的是关于Ant Design Pro中动态修改可编辑表单的值，特别是EditableProTable或ProForm的使用。现在用户补充说：“不对我说的是编辑表格内部的form使用”，这说明之前的回答可能没有完全满足他的需求，...
editableprotable行内数据联动
07-14
Editable Pro Table 是 Ant Design Pro 中的一个可编辑表格组件，它可以让你在表格中直接进行数据编辑，并且支持数据联动。 首先，你需要在你的项目中引入 Editable Pro Table 组件。在你的页面中，使用 import ...
EditableProTable的自定义表格（renderFormItem参数）
weixin_63042378的博客
04-28 3168
setNumData():"" //这里可以不加 如果你的num 默认是有值的 你需要加上这里 ，然后将值传给setNumData 这样是为了避免用户没有输入，外部就拿不到你的初始值 ，项目的需求是点击操作栏的编辑按钮，有一个可编辑的表格，下面是官方的例子，表格实现功能是既可以通过表单中的某一个值来计算表单输入框中的项，又能通过用户自定义来输入。antd-pro有很多的问题，不得不用，但是出现问题文档又不全，不过还好react很灵活，闭包虽然可能会出现问题，但是测试全就可以了 放心大胆的使用吧。
使用Bootstrap和jQuery的X-editable进行验证并异步修改数据
06-24
使用Bootstrap和jQuery的X-editable，并对输入数据进行验证，然后异步提交修改数据
EditableProTable(可编辑表格) 之坑
m0_58293192的博客
04-24 3741
EditableProTable(可编辑表格) 之坑
Ant-Design-Pro-Components： EditableProTable、ProTable组件数据联动。
~~~
06-19 3710
Ant-Design-Pro-Components： EditableProTable、ProTable组件数据联动。
react EditableProTable 表格内联动
datouniao1的博客
03-11 2238
想实现一个可以编，因为对EditableProTable比较初次使用，所以在编写的时候也遇到的很多的问题，中途也跑了弯路，但是功夫不负有心人，最终问题得到解决辑的表格，并且表格内的数据可以实现联动，自动的计算
关于antdpro的EdittableProTable编辑时两个下拉搜索框的数据联动以及数据回显（以及踩坑）
兔子的博客
10-20 2486
需求：使用antdpro的editprotable编辑两个下拉框，且下拉框是一个。下拉框1和2的值是一个编码和名字的联动关系，1变化会带动2，2变化会带动1的一个联动作用。（最后有略完整的代码，但是因为公司项目问题，删掉了一些不必要的代码，不确保运行成功）我使用的是renderFormItem进行渲染Select，并绑定了form。
ProComponents EditableProTable使用
qq_29050279的博客
05-26 876
【代码】ProComponents EditableProTable使用。
React中使用antd,给table里的每条数据做校验
Fs670267542的博客
08-18 1609
把rules写成一个数组,使用rules的第二个参数,打印这个value,可以看到value就是table里的每一条数据。我使用的是react+procomponents;procomponents也在antd的基础上做的封装,平时碰到的都是from校验,直接写rules就行。但是table里面有好几个字段。...
7.ProTable必填的查询表单
11-24 1328
ProTable必填的查询表单,根据文档配置了查询条件必填的配置，但一直无法生效
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值