Skip to content

添加组件

添加组件是表单设计的基础操作,通常包括拖入组件、设置组件属性和设置表单属性三个步骤;如果你想先了解组件入口、工作区和属性栏分别承担什么职责,也可以结合组件列表工作区属性栏一起阅读。

添加组件 1

添加组件

从左侧的字段面板中依次拖动所需要的组件,用来收集数据和信息。字段的名字就是需要收集数据的名称,字段的框内就是用来填写数据的地方。

添加组件 2

设置组件属性

选中字段,可以设置组件属性。如修改字段的标题名称、添加提示文字、设置字段校验、设置字段的可见权限、设置字段宽度等,让数据收集过程更加方便。更细的配置能力通常会落到基础配置属性配置事件配置验证配置高级配置中。

添加组件 3

设置表单属性

在 表单属性 中可以 设置表单名称、设置标签位置、设置内容位置、设置标签宽度、设置按钮显示隐藏、设置提交表单忽略隐藏字段、设置标签样式、设置表单事件。若后续还要在运行时读写表单数据、触发生命周期逻辑或控制提交流程,可以继续查看表单事件配置表单 API

添加组件 4

组件操作

工作区中选中组件后,通常支持以下常用操作:

  • 复制:快速生成一个相同配置的组件,减少重复设置。
  • 删除:移除当前不需要的组件。
  • 添加子级:对支持嵌套的容器组件,可继续插入子组件。
  • 拖拽排序:通过拖动调整组件在表单中的先后顺序。

撤销 / 重做

设计过程中如果发生误拖拽、误删除或错误修改,可以通过撤销回退到上一步状态,也可以通过重做恢复被撤销的操作。这一能力非常适合在复杂表单设计中快速修正操作路径。

设计完成后的检查与输出

表单设计完成后,建议继续执行以下步骤:

  1. 预览表单,检查 PC 端和移动端的显示效果。
  2. 切换阅读模式,确认最终信息展示是否清晰。
  3. 生成组件、SFC 或 HTML,输出最终交付产物。

这些输出最终都会对应一份规则数据和表单配置。如果你准备把设计结果接入项目或做二次开发,适合继续阅读快速上手TS类型定义