给个小鲜肉，你就能包揽表单开发的活

2023-10-09 00:52:25

本人使用el-form组件开发表单编辑场景已有一年之余，先后基于el-form组件几次封装了动态表单组件，封装的动态表单组件说白了就是预先写了一套全量的form模版，并内置了基础的校验逻辑，增加了一些定制的插槽，这样使用动态表单组件的时候，可以传入配置项来选择性的加载想要的基础表单控件，减少大量的代码，加速开发进度。

el-form表单编写虽然简单，但只有经历项目考验之后，我们才会知道他的真正缺点，本人在之前写过一篇文章，讲解el-form表单使用中遇到的问题及其解决方案，文章链接：

el-form表单使用

el-form表单组件是Element UI中常用的组件之一，它提供了强大的表单功能，支持多种表单元素，并具有良好的可定制性。

基本用法

el-form表单组件的基本用法非常简单，只需要在表单元素的父元素上添加el-form属性，并指定表单的model，即可实现表单数据的双向绑定。

<el-form :model="form">
  <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
  <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

表单校验

el-form表单组件还支持表单校验功能，可以通过rules属性来指定表单元素的校验规则。

<el-form :model="form" :rules="rules">
  <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
  <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 15, message: '用户名长度必须在3到15个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度必须在6到18个字符之间', trigger: 'blur' }
  ]
}

表单提交

el-form表单组件还支持表单提交功能，可以通过@submit事件监听表单的提交事件。

<el-form :model="form" @submit="submitForm">
  <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
  <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 表单验证通过，提交表单
      this.$message({
        message: '提交成功',
        type: 'success'
      })
    } else {
      // 表单验证不通过，提示用户
      this.$message({
        message: '表单验证不通过',
        type: 'error'
      })
    }
  })
}