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

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

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

目录

一、引言

二、项目准备

2.1 初始化 Vue 项目

2.2 安装 Element UI

三、实现动态表单

3.1 组件模板

3.2 组件脚本

3.3 代码解释

四、优化与扩展

4.1 更多表单字段

4.2 表单字段的动态校验

4.3 错误提示样式优化

结语

---

一、引言

在前端开发里，动态表单是常见的需求场景。比如在填写多个收货地址、添加多个商品信息等情况下，需要用户能够动态地新增或删除表单条目。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 组件模板

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

3.2 组件脚本

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

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 开发的实用技巧！

到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。创作这篇内容花费了不少心血，要是它帮你解决了问题，或者带来了启发，就多多支持下 “码上前端” 吧～要是想转载，麻烦一定注明本文链接，感谢大家！