之前笔者有写过一篇如何设计动态表单配置平台的文章,但是由于笔者电脑问题代码丢失,所以后期重新实现了一套表单设计器,并优化了之前的设计方式,特地做一下总结和复盘。
因为老员工的离职,我接手了一个完全由表单组成的发布模块,之前我并没有看过业务源码。后续因为接入新的需求而冲进去维护这坨代码。注意我用了“坨”这个量词,你应该明白我在说什么。因为整个模块缺少顶层设计,导致维护成本极高,频频报bug。于是开始思考为什么不能通过拖拽直接生成和维护这些表单呢?于是leggo就此诞生,名字来源于乐高Lego,寓意像搭积木一样完成表单的设计。
整个页面使用了一个渐变的背景色(这里直接使用了图片),重要的内容居中显示,条款等内容右下角小字展示;整个站点以拂晓蓝色调为主。
袋鼠云数栈从 2016 年发布第⼀个版本开始,就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想,坚定不移地⾛国产化信创路线,不断推进产品功能迭代、技术创新、服务细化和性能升级。
针对留言的展示,这里使用的是ant design自带的List和Comment组件:
我们在 SEE Conf 之际发布了 4.0 rc 版本。经过 1 个多月的反馈收集和调整之后,我们终于迎来了 4.0 的正式版!感谢在此期间每一位提供反馈、建议以及贡献的人。我们会结合 rc 版本已经涉及的更新以及一些比较重要的新增内容于此进行列举。完整的更新文档可以点击此处[1]。v4 文档地址:https://ant.design[2]
背景 近几年,low code、no code、pro code等越来越多的出现在我们的视野中。抱着不被卷的心态 ?,我决定来深入探索一下。 “我所在的是营销部门。每天/月都承载着大量的营销活动,本文
用 Form.Item 包裹 Input、Checkbox 等表单项,可以定义 rules,也就是每个表单项的校验规则。
几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章, 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示, 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题, 详细介绍一下实现原理。
大家好, 我是徐小夕, 之前一直在分享可视化低代码的一些实践, 围绕 H5-Dooring 零代码搭建平台也输出了很多技术文章, 最近2.7.0 版本也顺利迭代完成, 这里详细分享一下 H5-Dooring 无代码搭建平台技术方案.
目前很多企业或多或少的面临“信息孤岛”问题,各个系统平台之间的数据无法实现互通共享,难以实现一体化的数据分析和实时呈现。
Form.Item 中设置了 name 属性,但是 Form 中的 onValuesChange 并没有生效。简单代码如下,可以看 codesanbox[1] 示例:
我们都知道, AntD 最近喜提了4.0, 更新了许多新特性,看的我是心花怒放, 喜不自胜。更贴心的是还提供了升级工具,看了一些文章介绍说能三分钟升级。于是周六的时候, 懒觉我也不睡了, 跑到公司开始了升级之旅。
提交表单可以直接用回调函数里面的values获取值 重置表单数据 form.resetFields()
最近使用antd UI 的表单提交数据,数据里面有的是数组,有的是对象。提交的时候还要去校验参数,让人非常头疼。在我仔细看完文档之后,发现 antd 的 form 组件做的非常不错,这些需求通通不是问题。现在来总结一下。
antd3思想:使用HOC(高阶组件)包裹form表单,HOC组件中的state存储所有的value值,定义设置值和获取值的方法 缺点:动一发牵全身,一个value值改变,因为这是顶级状态,所以所有的子组件都会因父组件的重新render而render,浪费了性能
theme: channing-cyan highlight: a11y-light
首先,确保您的项目已经创建并配置了React环境。然后,您可以通过以下命令使用npm或yarn安装Antd:
animated 设为 true 是读取所有的帧,不然默认只会读取 gif 的第一帧。
在使用React+ant design进行开发时通常使用Form组件,但是很多时候我们某一个字段是二维数组。例如这样:
根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio
在form表单中自定义封装一个input组件 如果不做处理 form表单提交时是获取不到这个自定义组件的数据的 这个坑对于新手来说 真的是个大坑 特别是对表单内的元素做提交不是很了解的人 用ant的ui框架来说明吧 一个基础的表单 // ant表单组件 import { Form, Select, Input, Button } from 'antd'; const FormItem = Form.Item; const Option = Select.Option; class App ext
1 先上图 📷 📷 我这里是点击“修改密码”那个按钮,然后跳到了modal框。(大家这里可以随便写一个按钮,然后给他一个点击事件让他可以显示modal框就好了,我这里着重讲解标题的内容) 2 贴代码 const [visible, setVisible] = useState(false);//antd 控制modal是否显示 const showMoal=()=>{ // console.log("showMoal") setVisible(true); } const handle
蚂蚁金服的前端UI框架Ant Design 有专门针对 React 设计的 Ant Design for React 。今天在使用其中的 DatePicker 日期组件时遇到一个问题,其中有一些按钮显示英文,如下图所示:
组件“/machine”为已经定义好的路由,state负责传值state:{参数:值}
本文的重点为 Form 表单的校验及在数栈中的应用,偏向于应用总结与心得分享。众所周知,我们生在一个最好的时代,antd 已经帮我们把绝大多数功能封装好了,即开即用, API 详尽,但即便如此,antd 开发人员依然在当前基础上一遍又一遍地做优化和探索,所以,笔者希望通过本文不仅能带给大家业务上的小技巧,还希望能带给大家一些思路上的启发。
官方文档:https://antdv.com/components/table-cn/#API
点击前端围城,可快速关注 一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能,持续更新.... https://gitee.com/MTrun/big-screen-vue-datav Vue-Layout - 可视化布局 https://jaweii.github.io/Vue-Layout/dist/#/ layout 合集 https://vuejsexamples.com/tag/layout/ 鲁
如果连这点觉悟都没有,那就不是一个合格的程序员。而雇主的本质是逐利,最忌讳的是重构,这个问题可以请高水平的工程师来得到缓解,但不可能彻底解决。
使用useForm来操作数据 , form.resetFields() 重置数据
Ant Design Form 组件的 onFinish 方法无法获取 Checkbox 多选和 Radio 单选的值,代码:
大家好,我是19组清风。有段时间没有和大家见面了,最近因为有一些比较重要的事情(陪女朋友和换了新公司)在忙碌所以销声匿迹了一小段时间,
ant design Form.Item validator自定义校验对象的值不为空:
这篇文章收录了本人在前端学习实践中遇到的一些问题及解决,可供前端新人进行学习和参考,下面先展示一些可能有用的文档/文章/网站:
小白今年工作时间有一半都花在low code上面,且无论是b端or c端都有一些接触。接下来谈一下我对low code在业务和开发上带来的感受。
先说一下写着篇文章的契机,是因为回显,复杂表单的回显,让我觉得我对initialValue这个属性是有误解的。
低代码实现方式主流程就是设计页面、流程、规则等等,然后再还原,供最终使用者使用,真正落地使用到的技术都相差不大,基本的开发方式也就是文章中提到的页面驱动或者是模型驱动,但在具体开发过程中还是需要考虑很多问题的,比如:数据怎么保存、权限怎么设计、如何跟具体的业务系统结合、数据如何再加工等等,这块如果展开来写太多了,计划后面录成视频分享出来。
最近在维护公司的中台erp系统,项目中js库用的是react,ui库用的是antd。平时还是喜欢自己写css,刚开始还是有点不太习惯直接上ui库做项目,觉得用antd还是挺恶心的,主要是form。在熟悉了以后发现这个库真棒。
Contents 1 antd-design Form,Select联合使用 placeholder 不起作用问题 1.1 起因 1.2 排查 1.3 补充: antd-design Form,Sel
有一天,产品甩过来一个新的需求: 山月呀,「你对数据库中的用户完善用户姓名、用户邮箱、用户手机号,其中手机号必填」。
react的fusionUi组件提供了大量的封装好的组件,为开发人员节省了大量的时间,今天主要分享一下如何使用fusionUI的form表单组件,看一下最简单的例子:
在上一篇中,我们封装好了一些 custom hook 例如,用于操作 url 的 useUrlQueryParam 以及 useSetUrlSearchParam 同时我们封装了专门在 project 列表中使用的 hook ,搭建好了基本的框架,这一篇我们来使用这些 hook 来实现我们的功能,同时我们也会引出几个 custom hook
本文会分享一个我在实际工作中遇到的案例,从最开始的需求分析到项目搭建,以及最后落地的架构的整个过程。最终实现的效果是使用mono-repo实现了跨项目的组件共享。在本文中你可以看到:
最近在看在线表单设计,找了一些现成的产品和库,今天就看看怎样使用 React-Grid-Layout 实现表单设计。
form标签里面嵌套了三个form标签,仔细检查了自己复制的代码没有问题,那就是引入的时候哪个环节出错了。于是检查引入组件的代码。
本文最后更新于 94 天前,其中的信息可能已经有所发展或是发生改变。 React 函数组件 1、定义方式 React 函数组件是指使用函数方法定义的组件。 定义方式:与函数的定义方式相同,需要将内容 return 出来,需要注意的是最外层只有一个标签或者使用<></>(Fragment 标签)包裹起来,方法写在 return 前面。 const App = () => { const getData = () => { return [1, 2, 3, 4, 5]; }; ret
领取专属 10元无门槛券
手把手带您无忧上云