在 Vue 中搭配 Element UI 实现可增删与校验的动态表单

码上前端

已于 2025-02-18 15:50:17 修改

阅读量1.2k

点赞数 18

文章标签： vue.js 前端框架 javascript 前端 ui 动态表单

于 2025-02-18 15:37:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_65243376/article/details/145707397

版权

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

一、引言

在前端开发里，动态表单是常见的需求场景。比如在填写多个收货地址、添加多个商品信息等情况下，需要用户能够动态地新增或删除表单条目。Element UI 作为一款功能强大且美观的 Vue UI 组件库，为我们提供了丰富的表单组件。结合 Vue 的响应式特性，我们可以轻松实现一个支持新增、删除表单条目并带有校验功能的动态表单。接下来，我们将详细介绍如何在 Vue 项目中使用 Element UI 来构建这样的动态表单。

二、项目准备

2.1 初始化 Vue 项目

首先，确保你已经安装了 Vue CLI。如果还未安装，可以使用以下命令进行安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

vue create dynamic-form-project
cd dynamic-form-project

2.2 安装 Element UI

在项目中安装 Element UI，可以使用 npm 或 yarn 进行安装：

npm install element-ui --save
# 或者
yarn add element-ui

在 main.js 中引入 Element UI 并全局注册：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  render: h => h(App)
}).$mount('#app');

三、实现动态表单

3.1 组件模板

以下是一个简单的动态表单组件模板示例，包含一个输入框、一个新增按钮和一个删除按钮：

<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="formRef">
      <el-form-item label="表单列表" v-for="(item, index) in formData.items" :key="index" :prop="`items[${index}].name`" :rules="rules.items[0].name">
        <el-input v-model="item.name" placeholder="请输入名称"></el-input>
        <el-button @click="removeItem(index)" type="danger" size="small">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="addItem" type="primary">新增</el-button>
        <el-button @click="submitForm" type="success">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

3.2 组件脚本

在组件的脚本部分，实现表单数据的管理、新增、删除和校验逻辑：

<script>
export default {
  data() {
    return {
      formData: {
        items: [
          { name: '' }
        ]
      },
      rules: {
        items: [
          {
            name: [
              { required: true, message: '名称不能为空', trigger: 'blur' }
            ]
          }
        ]
      }
    };
  },
  methods: {
    addItem() {
      this.formData.items.push({ name: '' });
    },
    removeItem(index) {
      this.formData.items.splice(index, 1);
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('表单提交成功');
          console.log('表单数据:', this.formData);
        } else {
          alert('表单校验失败，请检查输入');
          return false;
        }
      });
    }
  }
};
</script>

3.3 代码解释

模板部分：
- 使用 el-form 包裹整个表单，通过 :model 绑定表单数据 formData，:rules 绑定校验规则 rules，ref 用于获取表单实例。
- 使用 v-for 指令循环渲染表单条目，每个条目包含一个 el-input 输入框和一个删除按钮。
- 提供一个新增按钮和一个提交按钮。
脚本部分：
- data 中定义了表单数据 formData 和校验规则 rules。初始时，formData.items 包含一个空的表单条目。
- addItem 方法用于在 formData.items 数组末尾添加一个新的表单条目。
- removeItem 方法根据传入的索引从 formData.items 数组中删除对应的表单条目。
- submitForm 方法调用表单实例的 validate 方法进行表单校验，根据校验结果给出相应提示，并处理表单数据。

四、优化与扩展

4.1 更多表单字段

可以根据实际需求，为每个表单条目添加更多的表单字段，如下拉框、单选框、复选框等。只需在 el-form-item 中添加相应的 Element UI 表单组件，并在 formData 和 rules 中进行相应的配置。

4.2 表单字段的动态校验

如果不同的表单条目需要不同的校验规则，可以根据条件动态修改 rules 对象。例如，根据某个字段的值来决定另一个字段是否为必填项。

4.3 错误提示样式优化

可以通过自定义 Element UI 的样式，对表单校验失败时的错误提示样式进行优化，使其更加美观和易用。

结语

通过结合 Vue 和 Element UI，我们成功实现了一个支持新增、删除表单条目并带有校验功能的动态表单。这种实现方式利用了 Vue 的响应式特性和 Element UI 的表单组件，代码结构清晰，易于维护和扩展。在实际项目中，可以根据具体需求对表单进行进一步的优化和定制。如果你在实现过程中遇到问题或有不同的想法，欢迎在评论区留言分享。希望本文能帮助你在 Vue 项目中顺利实现动态表单功能。别忘了点赞和关注，获取更多 Vue 开发的实用技巧！