Skip to content

属性栏

属性栏在设计器右侧,用来配置「当前选中的组件」或「整张表单」。选中组件时显示组件配置;切换到表单配置后,可统一调整标签位置、按钮显示、表单事件等。

属性栏

在哪里找

  1. 在工作区点击某个组件 → 右侧自动变为该组件的配置。
  2. 需要改整张表时,在属性栏切换到表单配置(或取消选中组件后进入表单配置,以界面为准)。

组件配置分区较多时,属性栏上方可能出现快捷图标,点击可跳到「基础 / 属性 / 高级 / 样式 / 事件 / 验证」对应位置。

组件配置概览

选中组件后,常见可配置内容如下(不同组件略有差异):

分区典型内容详细说明
基础配置字段名称、字段 ID、提示、宽度、忽略字段等基础配置
属性配置占位文案、选项、清除按钮、禁用只读、输入类型、变量绑定属性配置
插槽配置前缀/后缀图标或文案等插槽配置
事件配置值变化、点击等时机;动作详见行为动作事件配置
验证配置必填、长度、格式、自定义规则等验证配置
高级配置隐藏/必填/禁用条件、公式、数据联动等高级配置
样式配置间距、颜色、边框、全局样式类等样式配置

入门场景:改标题和必填

背景:报名表有一个输入框,标题还是默认「输入框」。 步骤

  1. 点击工作区中的输入框。
  2. 在基础配置把「字段名称」改为「姓名」。
  3. 打开验证配置,勾选必填,提示语写「请填写姓名」。
  4. 预览提交,空值时应出现提示。

常用场景:选项 + 联动条件

背景:设备报修单里,「故障类型」选「其他」时才显示「补充说明」。 步骤

  1. 配置单选「故障类型」的选项(见选项数据)。
  2. 给「补充说明」设置隐藏条件:仅当故障类型等于「其他」时显示。
  3. 预览中切换选项,确认补充说明显隐正确。

表单配置概览

表单配置作用于整张表,而不是单个字段:

类别典型内容详细说明
整体外观尺寸、标签位置/宽度、提交与重置按钮、忽略隐藏字段等表单配置
表单样式标签默认样式、统一视觉表单配置全局样式
表单事件提交、重置、创建完成、加载完成等时机表单事件配置

入门场景:标签一律放上方

把表单配置里的标签位置改为「顶部」,适合手机端报名表,标签与输入更易扫读。

常用场景:详情页隐藏提交按钮

做只读详情时,在表单配置中关闭提交/重置按钮,再配合预览的阅读模式检查展示效果。

使用建议

  • 先改基础信息(名称、提示),再补校验与高级逻辑,避免一上来就配复杂条件。
  • 多个字段重复的样式、数据、事件,优先放到全局配置,再在属性里引用。
  • 改完立刻预览,比只在画布上点选更能发现校验与联动问题。

相关阅读

相关技术文档