# Form 表单
MyFrom (opens new window) 是组件库的重要组成部分,它是一个表单项的容器,用来收纳表单项组件,提供排版、验证和数据处理功能。
# 代码示例
# 基础用法
MyFrom继承 el-form的全部参数和事件。用法与el-from有差别, el-from需要与el-form-item结合使用。 MyForm不需要显式调用,表单项组件内置了el-form-item, 不需要显式调用。
# 初始化数据
通过设置 model
属性回填表单数据
# 布局排版
与排版和外观相关的参数包括:
itemWidth
、footerAlign
、inline
、
labelWidth
、labelPosition
、size
、
submitText
、submittingText
、resetText
、footerBlock
、
footerExpandBlock
、footerFloat
# 验证
可以在MyForm或表单项组件配置rules
实现验证,用法与el-form、el-form-item一样
# 可折叠
设置 collapsible
可以实现折叠表单项,常用在筛选条件多的时候,把次要的折叠起来,节省空间。
# 字典数据
通过dictMap
设置静态字典数据
# 数据加载函数
# 动态表单
# 事件
支持的事件包括: submit
、reset
、change
、collapse
# 非事件方式获取form值
实时获取form值,与onSubmit方式最大的区别就是不用通过事件的方式获取form值
注:要是想获取form里某一项值,不建议v-model方式双向绑定获取
特别是绑定的值为model的,会把form给初始化,用this.$refs.ref值.currentModel
# submit().then
MyForm组件的submit 方法输出一个promise对象,一般使用在自定义提交按钮的情况下
# 自定义表单项 (setFormModel())
在一些特殊情况下,myForm 需要结合 element-ui 的表单组件或者其他个性化表单组件使用, 可以使用“my-form-custom” 进行表单项个性化定制。
- “my-form-custom” 内的 表单组件,不能用v-model 直接绑定 myForm 对应的“model”
- “my-form-custom” 内的 表单组件修改后,可以调用组件的 setFormModel() 方法