element-ui 组件 el-form 源码阅读

107 阅读1分钟

先看一下 el-form 的 template 部分: image.png

el-form 是基于原生的 form 标签进行封装的,首先给 form 元素加上了各种 class。

form的内容是由保留的默认 slot 填充的。

image.png

el-form provide 了当前组件实例,这样子在其它后代组件中,可以直接 通过 this.elForm 访问到 el-form 组件实例。

我们再把所有声明的 props 过一下:

image.png

  • model 就是文档中 model 传入的对象,主要用来表单验证时使用
  • rules 表单验证规则
  • labelPosition label-position
  • inlineMessage
  • statusIcon
  • showMessage
  • validateOnRuleChange
  • hideRequiredAsterisk

image.png