剖析el-form配置化二次封装的思路，附赠代码，开箱即用

前端

2023-09-17 11:13:04

配置化el-form的二次封装之思路分析附上代码可直接使用 #

我将以独一无二的观点，情感充沛的文字，精心构建这篇文章。

毫无疑问，前端开发工作中，表单是不可或缺的一部分。它是与用户进行交互的主要方式之一。而Element UI作为一款优秀的Vue组件库，提供了开箱即用的el-form组件，满足了我们对表单的各种需求。

但是，当项目需求逐渐复杂时，el-form组件的默认配置往往无法满足我们的需求。比如，我们需要对表单字段进行动态校验，或者需要对表单进行二次封装，以满足特定的业务场景。

此时，我们就需要对el-form组件进行二次封装，以满足我们的定制化需求。

一、二次封装的思路

二次封装的思路其实很简单，就是遵循“学习规则、使用规则、自定义规则”的原则。

学习规则 ：首先，我们需要学习el-form组件的底层规则，也就是它的官方文档。
使用规则 ：然后，我们需要在项目中使用el-form组件，在使用的过程中，进一步理解它的官方文档。
自定义规则 ：最后，我们可以基于原有的底层规则，再自定义新的规则，封装新的组件，便于复用。

二、具体步骤

下面，我将以一个具体的例子来说明二次封装的步骤。

假设我们有一个需求，需要对表单字段进行动态校验。

学习规则 ：首先，我们需要查阅el-form组件的官方文档，了解它的校验规则。
使用规则 ：然后，我们需要在项目中使用el-form组件，并根据官方文档的说明，对表单字段进行校验。
自定义规则 ：最后，我们可以基于原有的校验规则，自定义新的校验规则。比如，我们可以自定义一个校验规则，来校验表单字段是否符合某种特定的格式。

三、代码示例

下面是一个配置化el-form二次封装的代码示例：

import Vue from 'vue'
import ElementUI from 'element-ui'
import { Form, FormItem, Input, Button } from 'element-ui'

Vue.use(ElementUI)

const FormPlus = {
  name: 'FormPlus',
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Button.name]: Button
  },
  props: {
    model: {
      type: Object,
      default: {}
    },
    rules: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      form: { ...this.model }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
        } else {
          // 表单验证不通过，提示用户
        }
      })
    },
    onReset() {
      this.$refs.form.resetFields()
    }
  },
  template: `
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  `
}

Vue.component('FormPlus', FormPlus)