# 表单设计器基础 ## 介绍 表单设计器是一款可以“所见即的”式的设计表单的工具。操作很简单,只需要将你需要的**组件拖动到页面中**即可。 我们支持的组件有很多,具体如下所示 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184308az1d2d93k2u4dd9u.png) ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184311hmhm2iqioipispwy.png) ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184313ss4p5l5oas6dl0zd.png) ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184314l7nk7b42os85cosz.png) ## 基本使用 如下图所示,只需要将你需要的**组件拖动到页面中**即可。 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184315l08u8p4rz0mozeo0.gif) ### 配置字段属性 以单行文本为例,配置它的字段属性 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184321q0wnnsw2nkzo019k.png) #### 标题 用于配置标签的标题,例如我修改成“姓名”就会显示成下面这种效果 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184322niih5nzi56ifmggi.png) #### 宽度 宽度,顾名思义,就是设置组件的宽度,但是就算两个组件的宽度均不大于50%,也无法做到显示在同一行,想要显示在同一行,只能通过布局组件来实现,例如栅格布局组件。 #### 占位内容 即当用户没有输入任何内容时的提示内容,如下图所示 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184323qeiezpf7paqqifvw.png) #### 默认值 即默认显示的内容 #### CSS类名 用于高级的CSS增强,在高级操作手册里有详细讲解 #### 数据绑定Key 即存储到后台的数据key,如果在表单属性里设置了Online表单,就可选择online表单里的字段,否则就只能手动输入。 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184325et0uikgffxsjkthg.png) #### 操作属性 可设置组件的一些属性,例如只读、禁用等 #### 校验 可设置一些校验属性,例如常用的有必填,如果设置了必填,则效果如下 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184327cl5k15e0pazlueu0.png) ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184329fd716rzxex6fi66r.png) ### 配置表单属性 表单属性用于对当前表单做出一些全局的修改 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/185030bsbwnswtqxqsbqj2.png) 具体配置如下: #### Online表单 可以对接配置的Online表单,只需要下拉选择你要对接的Online表单即可,选择之后会将数据同步到Online表单数据库里 #### 标签对齐方式 可选择文本标签的对齐方式,默认为顶部对齐 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184317qtjgzozj7g77p792.gif) #### 表单字段宽度 可以控制表单标签所占的宽度,默认100,最大200,最小0。标签对齐方式为顶部对齐时无效 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184318jk5n22nan6sjs56w.gif) #### 组件尺寸 可选择组件的尺寸大小,可选值有:medium、small、mini ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184319s4hezl1y3t1a1lkh.gif) #### 弹窗宽度 可更改弹窗的宽度,可以在**预览**界面查看效果 #### 弹窗顶部距离 可更改弹窗的顶部距离,可以在**预览**界面查看效果 #### 表单内边距 可更改表单的内边距,可以在**预览**界面查看效果 例如进行如下配置 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184331jumt0sudbckziiib.png) 运行效果如下 ![image](http://www.jeecg.org/data/attachment/forum/201908/06/184332sat6kzgnd3k7byyd.png) #### JS增强 用于写更高级的全局JS增强,在高级操作手册里有详细讲解 #### CSS增强 用于写更高级的全局CSS增强,在高级操作手册里有详细讲解