# 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() 方法