Skip to content

工作区

工作区是中间的画布:从左侧拖入组件、调整顺序与嵌套、直接试填,所见即所得。大多数「表长什么样」的问题,都在这里解决。

工作区空画布

在哪里找

功能栏与属性栏之间的大片区域即为工作区。顶部工具栏可切换预览宽度、辅助线与快速布局。

可视化拖拽

组件列表拖入输入框、下拉、日期、容器等,放到目标位置松手即可。

入门场景:拖入「姓名」「手机号」两个输入框,完成报名表骨架。 常用场景:先拖「卡片」容器,再往卡片里拖分组字段,形成「基本信息 / 联系方式」分区。

拖拽添加组件

栅格与多列

使用布局组件(如栅格/行列)或工具栏快速布局,让多个字段并排显示,并兼顾 PC / 移动宽度。

入门场景:姓名、手机号两列并排。 常用场景:地址表单「省 / 市 / 区」三列,详细地址单独占整行。

栅格布局

容器嵌套

可在工作区嵌套卡片、折叠面板、步骤条、标签页等,实现分组、分步填写。

入门场景:用标签页拆成「个人信息」「教育经历」两页。 常用场景:入职流程用步骤条:「基本信息 → 材料上传 → 确认提交」,每步放不同字段。

详见:容器组件子表单组件

容器嵌套

复制与调整顺序

  • 复制:选中组件后复制,再粘贴,保留已配属性,适合重复字段组。
  • 调整顺序:拖拽组件,或使用上移/下移(含快捷键,见功能栏快捷键面板)。

入门场景:复制「紧急联系人姓名」得到「紧急联系人电话」再改标题。 常用场景:审批表调整字段顺序,把「申请事由」移到最前。

复制与排序

实时试填

工作区中的组件可直接输入、选择,便于边设计边感受交互;必填提示、选项、日期范围等多数能即时反馈。完整提交流程、阅读模式等请用顶部预览

入门场景:在画布上点选下拉,确认选项文字无误。 常用场景:配完隐藏条件后,在画布切换触发字段,观察目标字段是否显示。

选中与层级

  • 选中组件会出现高亮边框,右侧属性栏同步切换。
  • 容器可折叠/展开,降低复杂表单的视觉噪音。
  • 也可用大纲从树形结构定位深层组件。

入门场景:点选嵌套在卡片里的输入框,确认属性栏标题就是该字段。 常用场景:深层子表单里找不到字段时,用大纲定位再回到工作区调整。

选中高亮与层级

操作反馈

  • 字段标识重复等配置问题时,组件可能出现错误提示边框或文案,按提示修改即可。
  • 保存、导出、JSON 面板中的内容与工作区结构保持同步,改画布即改结构。

相关阅读

相关技术文档