YsForm模板
form 表单
温馨提示
个人建议,当一个表单里面存在过多逻辑,互相依赖,并且动态表单过多的时候,不建议使用该组件,该组件更适合较为简单的表单;开发这个组件的初衷是为了实现低代码,拖拉拽表单使用的
TIP
布局默认为flex布局；
form 属性
提示
属性可继承 element-plus的form组件的form属性 el-form文档
| 参数 | 说明 | 类型 | 默认参数 | 是否必传 |
|---|---|---|---|---|
| model | 表单数据对象 | object | {} | 是 |
| fieldList | 表单项字段列表 | Array[object] | -- | 是 |
| rules | 表单验证规则 | object | -- | 否 |
| layout | 表单布局方式 | string | flex | 否 |
| layoutConfig | 布局配置 | object | {gridColumn: 2,flexSpan: 12} | 否 |
fieldList 属性 表单字段列表
提示
type,render,slot三个都不配置的话，会渲染成无样式的文本状态； render,slot更适合处理复杂的表单项
| 参数 | 说明 | 类型 | 默认参数 | 是否必传 |
|---|---|---|---|---|
| fieldConfig | 表单项基础配置，可全部继承 FormItem Attributes | oject | {} | 是 |
| type | 组件式渲染 element form组件名称 比如input 就是ELInput；适合单项的组件，像select复合型的，请使用插槽或者render;如果是字符串,需要全局引入element-plus 如果是按需引入,则按需引入,并放组件 | string | -- | 否 |
| render | render函数,常用于自定义vue组件;更适合复合型的组件例如elselect; 回调(_form: any, _prop: any) form:表单数据对象 prop:表单项字段 | function | -- | 否 |
| slot | 自定义具名插槽，组件内使用插槽的时候，#[slot] 懂伐，不懂的话，就是如果slot的值为slotname 插槽v-solt:slotname;提倡使用简写，即#slotname; 解析参数(_form: any, _prop: any,fieldConfig:oject) form:表单数据对象 fieldConfig:表单数据对象 prop:表单项字段 | string | -- | 否 |
| componentConfig | 表单交互组件配置 可继承自各个表单交互组件的配置，例如ElInput 仅在type组件渲染的情况下使用该配置 | object | -- | 否 |
| layout | 单个字段项的布局配置 | oject | -- | 否 |
fieldConfig 表单项基础配置，可全部继承 FormItem Attributes
提示
可全部继承 FormItem Attributes
| 参数 | 说明 | 类型 | 是否必传 |
|---|---|---|---|
| label | 标签位置显示的内容s | string | 是 |
| prop | 表单绑定的对象键值 | string | 是;这个可以传空字符串,配合插槽实现,嵌套表单,可以查看具体实现的例子:联系方式一列;也可以实现动态表单 |
| required | 是否必传 | boolean | 否 |
| rules | 只针对当前表单项校验规则，优先级高于绑定到表单的校验规则 | object | 否 |
| hidden | 是否隐藏 | (_form: any, _prop: any) => boolean | 否 |
layout 单个字段项的布局配置
提示
必须都为正整数
| 参数 | 说明 | 类型 | 是否必传 |
|---|---|---|---|
| gridColumn | grid 跨列如果你的 .item 子类中设置了 grid-column: span 3;，而同时你的 .container 父类中使用了 grid-template-columns: repeat(2, 1fr);，这可能导致每行显示 3 个项目而不是 2 个，因为每个 .item 被指示要横跨 3 列。 通俗来讲就是，单项的配置跨列，如果超出设置的一行几个，会导致每行显示三个，而不是两个， 如果你想确保每行只有两列，并且某些 .item 元素横跨这两列，你应该确保 grid-column 的跨度不超过设置的列数 | number | 否 |
| flexSpan | flex 布局占比 element plus Layout 布局 24/改数值，不能有余数；默认12； 如果想跨列的话，设置为上行对应的项的倍数即可；可以参考代码实现 | number | 否 |
表单布局配置
提示
grid 跨列如果你的 .item 子类中设置了 grid-column: span 3;，而同时你的 .container 父类中使用了 grid-template-columns: repeat(2, 1fr);，这可能导致每行显示 3 个项目而不是 2 个，因为每个 .item 被指示要横跨 3 列。
通俗来讲就是，单项的配置跨列，如果超出设置的一行几个，会导致每行显示三个，而不是两个， 如果你想确保每行只有两列，并且某些 .item 元素横跨这两列，你应该确保 grid-column 的跨度不超过设置的列数
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| gridColumn | 一行几个 | number | 2 | 否 |
| flexSpan | flex 布局占比 element plus Layout 布局 24/改数值，不能有余数；默认12 | number | 12 |
form 方法
提示
通过ref调用子组件的getYsFormRef();则会返回ys-form内的el-form的ref;然后可以调用el-form的所有的方法方法
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| getYsFormRef | 返回组件内form表单的ref | ref |
slots 插槽
| 插槽名 | 说明 |
|---|---|
| footer | 表单底部插槽 |