阿里低代码引擎 | LowCodeEngine - 如何完成一个表单

1,668 阅读2分钟

首发于 语雀文档@blueju

前言

如何完成一个表单?听起来挺简单的,确实,用写代码的方式的话不难。但在这个低代码平台中,根据我最近几天的使用体验,很可能会摸不着头脑,因为它与我们通常 vue + element 和 react + antdesign 的流程并不完全相似。

从左侧组件库中拖入一个表单容器

拖入后的效果并不就是下图的效果,下图中的表单项是我自己再次从左侧组件库中拖入组合的

image.png

有了表单,接下来便是针对表单组件的一些变量、函数的配置了。而对于如何从左侧组件库中拖入组合布局这块不再详细阐释,根据我最近几天的使用体验,感觉一点都不难。

配置

难配置的是表单的数据流管理模式,以上图查询条件表单为例,我将讲几个配置难点:

如何管理表单数据

以下一段是我一开始使用时遇过的坎或者思路想法,可不看

你可能以为是这样(类似 react + 原生html 的模式)

  • 定义一个对象,专门存储查询条件表单中的查询条件,并将其绑定到各表单项组件的 value 中,使用 onChange 方法使其成为受控组件,实时修改查询条件表单中的值,并在数据源中的请求的请求参数绑定查询条件表单中的值,点击查询时调用数据源中的请求,最后输入些查询条件点击查询,你就会发现查询表单成功运行起来了完成了。(使用这种方式特别的麻烦,要定义很多方法)

或者可能以为是这样(类似 react + antdesign 的模式)

  • 为 form 设置一个 ref,点击查询查询时使用 ref 里的方法获取表单值,并将其赋值到 state 的一个对象中,并在数据源中的请求的请求参数绑定查询条件表单中的值,点击查询时调用数据源中的请求,最后输入些查询条件点击查询。(这种方式)

可能以上你看下来会有些懵,但如果你花了一下午试用了下这个平台,相信你很快就能理解过来了。

2022年5月2日09:16:36
此时,阿里低代码引擎中已经有含 antd 物料的场景了,本来我写这篇文章的初衷也是通过了解之前的 fusion 物料在阿里低代码引擎中的使用,来了解如何改造成 antd(因为 fusion 不常用而 antd 更多人用),目前看来是不需要了。

哈哈,本文停更。