# Form 表单

MyFrom (opens new window) 是组件库的重要组成部分,

它是一个表单项的容器,用来收纳表单项组件,提供排版、验证和数据处理功能。

# 代码示例

# 基础用法

MyFrom继承 el-form的全部参数和事件。用法与el-from有差别, el-from需要与el-form-item结合使用。 MyForm不需要显式调用,表单项组件内置了el-form-item, 不需要显式调用。

# 初始化数据

通过设置 model 属性回填表单数据

# 布局排版

与排版和外观相关的参数包括: itemWidthfooterAligninlinelabelWidthlabelPositionsizesubmitTextsubmittingTextresetTextfooterBlockfooterExpandBlockfooterFloat

# 验证

可以在MyForm或表单项组件配置rules实现验证,用法与el-form、el-form-item一样

# 可折叠

设置 collapsible 可以实现折叠表单项,常用在筛选条件多的时候,把次要的折叠起来,节省空间。

# 字典数据

通过dictMap设置静态字典数据

# 数据加载函数

# 动态表单

# 事件

支持的事件包括: submitresetchangecollapse

# 非事件方式获取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() 方法