表单(SchemaForm)
/web/src/components/schemaForm/SchemaForm.vue该组件对 Element Plus 的 Form 表单 进行了二次封装，提供了默认的表单布局、校验等功能，以及完全使用 TypeScript 编写的动态表单功能。
示例：/web/src/views/demo/SchemaFormDemo.vue
API
Attributes
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| v-model | 表单绑定值 | FormModel | - | 是 |
| form | 表单配置，T 传递表单绑定值的类型 | SchemaForm<T> | - | 是 |
Events
| 名称 | 说明 | 类型 |
|---|---|---|
| onValidateOk | 表单提交校验成功的回调，参数为校验后的表单绑定值 | (formModel) => void |
Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| formRef | 表单的模板引用，与 Element Plus 的 Form Exposes 一致 |
Slots
| 参数 | 说明 | 类型 |
|---|---|---|
| default | 操作按钮栏，查询、提交 |
类型声明
FormModel
/web/src/types/FormModel.d.ts
ts
type FormModel = Record<string, any>
let fromModel = ref<FormModel>({
name: '张三',
age: 18
})SchemaForm
/web/src/components/schemaForm/types/index.d.ts
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| props | 表单属性，T 传递表单绑定值的类型 | FormProps<T> | - | 是 |
| formItems | 依据表单绑定值的 key 配置表单项目及对应的组件，T 传递表单绑定值的类型 | FormItems<T> | - | 是 |
FormProps
继承了 Element Plus 的 Form Attributes，移除了 model 和 rules 属性，并添加以下属性。
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| rules | Element Plus 表单校验规则，添加了 key 值提示 | FormRules<T> | - | 否 |
| showButtonSlot | 是否显示提交、重置按钮 | boolean | false | 否 |
FormItems
根据表单绑定值的 key 配置表单项目及对应的组件，每个 key 对应一个表单项，可仅对需要的 key 进行配置，表单项配置如下：
/web/src/components/schemaForm/types/index.d.ts
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| props | 表单项目 porps，与 Element Plus 的 FormItem Attributes 一致，删除了prop属性 | - | 否 | |
| component | 表单项目的组件，可参考 Vue3 的渲染函数 h | VNode | - | 是 |
| vIf | 等同于v-if，控制表单项目是否显示，传递的参数为表单绑定值 | (model: T) => boolean | - | 否 |