Vue业务组件封装（二）Form表单

最新推荐文章于 2025-04-20 11:29:52 发布

东方睡衣

最新推荐文章于 2025-04-20 11:29:52 发布

阅读量1w

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/web2022050903/article/details/125486630

版权

本文详细介绍了如何基于Element UI封装Vue Form组件，包括封装思路、配置文件的创建以及组件的具体实现，旨在提高组件的复用性和扩展性。通过对配置文件的解析，动态生成表单元素，并实现数据的双向绑定和校验功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

这个系列主要是分享自己在工作中常用到的业务组件，以及如何对这些组件进行有效的封装和封装的思路。注：都是基于element ui进行二次封装。

封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复用性。

Form组件介绍

Form表单包含输入框, 单选框, 下拉选择, 多选框等用户输入的组件。使用表单，可以收集、验证和提交数据。

表单常用的地方是在搜索、信息提交、内容编辑以及新增。

搜索表单

编辑表单

Form组件封装思路

了解element Form组件代码

这里以最基本的Form代码为例进行分析：

<template>
  <el-form label-width="120px" ref="ruleFormRef" :model="ruleForm" :rules="rules">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>
const form = reactive({
  name: '',
  region: ''
})

基本表单

根据基本的Form代码，我们可以知道：

整个Form表单数据绑定在el-form上：:model=“form”，form就是表单的数据对象。
表单里面的每一项是放在el-form-item标签里面，放入我们想渲染出来的组件，如输入框，单选等。
每个el-form-item中可以绑定了prop、label、rules等属性，我们可以在配置文件中配置对应属性的值进行绑定。

Form组件如何去封装

通过分析Form代码我们可以通过一个配置文件去遍历得到el-form-item，然后在el-form-item上面绑定我们需要的属性就可以得到我们想要的表单。

代码实现

配置文件

我们可以在页面文件夹下面新建一个文件夹config用于存放页面需要的各种配置文件，在里面新建我们表单的配置文件formConfig.ts：

import { IForm } from '@/components/Form/types'
import { rules } from '@/utils/validator'
export const modalConfig: IForm = {
  formItems: [
    {
      field: 'name',
      label: '用户名',
      placeholder: '请输入用户名',
      type: 'input',
      rule: [{ required: true, message: 'Please input name', trigger: 'blur' }]
    },
    {
      field: 'realname',
      type: 'input',
      label: '真实姓名',
      placeholder: '请输入真实姓名',
      rule: [
        { required: true, message: 'Please input realname', trigger: 'blur' }
      ]
    },
    {
      field: 'password',
      type: 'password',
      label: '用户密码',
      placeholder: '请输入密码',
      isHidden: false,
      rule: [
        { required: true, message: 'Please input password', trigger: 'blur' }
      ]
    },
    {
      field: 'cellphone',
      type: 'input',
      label: '电话号码',
      placeholder: '请输入电话号码',
      rule: [
        {
          required: true,
          message: '请输入正确手机号码',
          validator: (rule: any, value: any) => /^1\d{10}$/.test(value)
        }
      ]
    },
    {
      field: 'departmentId',
      type: 'select',
      label: '部门',
      placeholder: '请选择部门',
      options: [],
      rule: [
        {
          required: true,
          message: 'Please input departmentId',
          trigger: 'change'
        }
      ]
    },
    {
      field: 'roleId',
      type: 'select',
      label: '角色',
      placeholder: '请选择角色',
      options: [],
      rule: [

最低0.47元/天解锁文章