form表单组件 ​

https://element-plus.org/zh-CN/component/form.html

Hidden Title ​

属性事件插槽简介 ​

基础用法 ​

主题（theme 默认值：default） ​

切换主题查看表单及其 schema 控件的联动样式，单项 attrs.theme 可覆盖表单主题。基础用法：通过顶部选项切换主题。theme 可选值 default / chenghua / shijingshan / sybz / gulou，默认值 default。

标签主副文本 subLabel（默认值为空） ​

gap 左右间隙，默认值 16px ​

高级 schema 用法 ​

分组标题 type="title" ​

表单校验规则 ​

动态显隐 isShow ​

多个属性 ​

添加/删除表单项 ​

每行展示多少项 ​

插槽 ​

render函数 ​

事件 ​

s-form 的根节点是 Element Plus 的 el-form（原生 <form>），组件内部已默认阻止原生 submit 的页面跳转，避免表单内输入框回车触发整页刷新（例如在 s-dialog 中新建数据时弹窗被刷新关闭）。内部只调用 event.preventDefault()，不阻止事件冒泡，通过 @submit 传入的监听仍会正常触发。

通常用法 ​

远程返回的表单数据 ​

自定义指令 ​

提交前 trim（默认值 true） ​

标签提示 tooltip（默认值为空） ​

属性 ​

fieldList 内部属性 ​

fieldList 是 s-form 的表单 schema 配置。每一项只保留表单编排需要的字段；控件属性统一放到 attrs，表单项属性统一放到 formItemAttrs。例如 type="title" 时，s-title 的 title、subTitle、theme、type 等属性都写到 attrs 里。

TypeScript 项目中建议从 sybz-components/types 引入表单项类型，让动态函数里的 model、value、setFieldValue 等上下文有明确提示：

import type { SFormFieldItem } from 'sybz-components/types'

const fieldList: SFormFieldItem[] = [
  { label: '账号', prop: 'account', required: true },
  { label: '角色', prop: 'role', comp: 's-select', attrs: { options: roleOptions } },
]

import type { SFormFieldItem } from 'sybz-components/types'

const fieldList: SFormFieldItem[] = [
  { label: '账号', prop: 'account', required: true },
  { label: '角色', prop: 'role', comp: 's-select', attrs: { options: roleOptions } },
]

表单上下文 ​

attrs、formItemAttrs、rules、isShow、render 和插槽都会拿到同一份上下文：{ option, model, value, prop, index, formRef, getValue, setValue, setFieldValue }。其中 option 是当前 fieldList 配置项，model 是完整表单数据。

Form Exposes ​

| 名称 | 说明 | 类型 | | :----------------: | ------------------------------------ | --------------------------------------------------------- | --- | | validate | 校验 form 表单，成功后返回当前 model | Function(isResetFieldsOrParams = false, otherParams = {}) | | validateField | 校验指定字段 | Function | | resetFields | 重置 form 表单 | Function | | clearValidate | 清除校验 | Function(props?: string / string[]) | | scrollToField | 滚动到指定字段 | Function(prop: string) | | submit | 调用 validate | Function | | getModel | 获取当前 model | Function | | getValue | 获取指定路径的值 | Function(prop: string) | | setValue | 设置指定路径的值 | Function(prop: string, value: any) | | getFields | 获取全部字段配置 | Function | | getField | 获取指定字段配置 | Function(prop: string) | | getVisibleFields | 获取当前可见字段配置 | Function | | formRef / sFormRef | 获取内部 el-form 实例 | Ref | --> |