深入解析 Element Plus Form 表单组件源码，打造高效表单体验

2023-11-01 05:53:29

[Element Plus 源码解析] Form 表单组件

前言

在日常的 Web 开发中，表单组件无疑是必不可少的。其作用是收集、验证和提交用户输入的数据。而 Element Plus 的 el-form 表单组件，正是这一领域的佼佼者。本文将通过对它的源码解析，深入了解其工作原理，从而提升我们的开发能力。

组件概述

el-form 表单组件由一系列子组件组成，包括输入框、选择器、单选框、多选框等。这些组件协同工作，实现数据收集、验证和提交的功能。

源码解析

1. 组件结构

<script>
  import { defineComponent, reactive, computed } from 'vue'
  import { useForm } from '@element-plus/hooks'
  import { FormItem, Input, Select, Radio, Checkbox } from '@element-plus/components'

  export default defineComponent({
    components: {
      FormItem,
      Input,
      Select,
      Radio,
      Checkbox
    },
    setup() {
      const { formRef, model, resetFields } = useForm()
      return { formRef, model, resetFields }
    }
  })
</script>

从组件结构中可以看出，el-form 组件通过 useForm 钩子函数创建了表单实例，并提供了 formRef、model、resetFields 等属性和方法供外部使用。

2. 数据绑定

el-form 组件使用 Vue 的响应式数据绑定，通过 model 属性将表单数据与组件状态进行关联。当表单数据发生变化时，组件状态也会随之更新。

<el-form v-model="formModel">
  <el-form-item label="用户名">
    <el-input v-model="formModel.username"></el-input>
  </el-form-item>
</el-form>

3. 验证规则

el-form 组件提供了丰富的验证规则，可对表单数据进行各种校验。开发者可以通过 rules 属性指定验证规则，并通过 validate 方法触发验证。

<el-form :rules="formRules">
  <el-form-item prop="username">
    <el-input v-model="formModel.username"></el-input>
  </el-form-item>
</el-form>

4. 表单提交

el-form 组件提供了一个 submit 方法，用于提交表单数据。在提交之前，组件会自动触发验证，并根据验证结果决定是否提交数据。

<el-form @submit="onSubmit">
  <!-- 表单内容 -->
</el-form>

进阶用法

1. 自定义校验规则

开发者可以通过 addRule 方法自定义校验规则，满足特定的业务需求。

formRef.addRule('username', (value) => {
  if (value === 'admin') {
    return '用户名不能为 admin'
  }
})

2. 动态表单

el-form 组件支持动态添加和删除表单项，以实现动态表单的功能。

const items = reactive([
  {
    label: '用户名',
    prop: 'username',
    rules: [
      { required: true, message: '请输入用户名' }
    ]
  }
])

formRef.add(items[0])