表单容器

该组件基于 Element Plus 的 <el-form> 封装，是低代码平台中用于组织、校验和提交结构化输入数据的核心容器。它不仅提供丰富的表单布局与样式配置，还内置了数据定义管理、双向绑定、校验规则集成等能力，支持子表单项（如输入框、选择器等）自动接入统一的表单上下文。

基础属性

属性	类型	说明
紧凑模式 compact	boolean	启用后减小表单项间距（margin-bottom: 8px）
尺寸 size	'large' | 'default' | 'small'	控制所有子表单元素的尺寸
隐藏标签 hideLabel	boolean	隐藏所有子项的 label（不影响校验）
标签后缀 labelSuffix	string	如 : 或 ：，默认为冒号
标签宽度 labelWidth	string（支持 CSS 单位）	如 120px，需配合“标签位置”使用
标签位置 labelPosition	'left' | 'right' | 'top'	标签相对于输入框的位置
必填星号位置 requireAsteriskPosition	'left' | 'right'	星号显示在标签左侧或右侧
隐藏必填星号 hideRequiredAsterisk	boolean	全局隐藏所有必填标识
校验图标 statusIcon	boolean	显示成功/错误状态图标
水平对齐 justify	枚举（左/中/右）	控制整个表单在容器中的水平排列

💡 提示：部分属性变更需刷新组件或重新渲染才能生效。

高级属性

属性	类型	说明
绑定数据 data	object	表单的初始值与响应式模型；子表单项通过 prop="xxx" 自动绑定到该对象的对应字段 （可绑定）
只读 readonly	boolean	全局设置所有子表单项为只读状态（可绑定）
禁用 disabled	boolean	全局禁用所有子表单项（可绑定）

🔒 绑定保护：禁止将 data 绑定到表单自身生成的数据定义（防止循环依赖）。

嵌套限制

• 禁止重复嵌套：不能在“表单容器”内部再插入新的表单容器，避免 <el-form> 嵌套导致的校验和模型混乱。

上下文

该组件通过 exposeContext 暴露运行时上下文，使用方式如下：

• 在可执行函数（如事件函数、属性绑定函数）中，通过 $useExposeContext(key) 获取；
• 在自定义 Hook 或其他组件中，通过 useExposeContext(key) 获取。

exposeContext({
  formRef: () => formRef.value,
  formModel: () => formModel,
  isHideLabel: () => usePropValue('hideLabel'),
  isReadonly: () => usePropValue('readonly'),
  isDisabled: () => usePropValue('disabled'),
  getData: async () => {
    await formRef.value.validate()
    return formModel.value
  }
})

上下文内容：

键（key）	说明
formRef	返回el-form 组件的实例引用，可用于调用其内部方法
formModel	表单数据定义
isHideLabel	是否隐藏标签
isReadonly	是否只读
isDisabled	是否禁用
getData	触发校验并返回有效数据

✅ getData() 会先调用 validate()，校验失败则抛出错误，确保返回的是合法数据。

注意事项

• 📌 子表单项必须设置 prop 才能参与表单模型绑定与校验；
• ⚠️ 不支持动态增删 prop 字段（需提前规划好数据结构）；
• 🧩 可与“条件v-if”、“循环v-for”结合，实现动态表单逻辑。