介绍

在前端开发中，经常会遇到需要动态生成表单的需求。Vue 是一套用于构建用户界面的渐进式框架，而 Element UI 是基于 Vue.js 的一套桌面端组件库。结合 Vue 和 Element UI，我们可以很方便地实现动态表单的功能，并且还能够实现新增行、删除行、动态表单验证以及提交功能。

实现步骤

安装依赖

首先，我们需要安装 Vue 和 Element UI 的依赖，在你的项目根目录下执行以下命令：

# 安装 Vue
npm install vue

# 安装 Element UI
npm install element-ui

创建表单组件

接下来，我们需要创建一个表单组件，用于动态生成表单。在你的项目中创建一个名为 DynamicForm.vue 的文件，并添加以下代码：

<template>
  <div>
    <el-button @click="addRow">新增行</el-button>
    <el-button @click="deleteRow">删除行</el-button>
    <el-button @click="submit">提交</el-button>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-table :data="form" style="width: 100%">
        <el-table-column
          prop="name"
          label="名称"
          width="180">
          <template slot-scope="{row}">
            <el-form-item :prop="'name.' + row.index + '.value'" :rules="[{ required: true, message: '请输入名称' }]">
              <el-input v-model="row.name.value"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="180">
          <template slot-scope="{row}">
            <el-form-item :prop="'age.' + row.index + '.value'" :rules="[{ required: true, message: '请输入年龄' }]">
              <el-input v-model="row.age.value"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: [
        { 
          name: { value: '' }, 
          age: { value: '' } 
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    addRow() {
      this.form.push({ 
        name: { value: '' },
        age: { value: '' } 
      });
    },
    deleteRow() {
      if (this.form.length > 1) {
        this.form.pop();
      }
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单逻辑
        } else {
          // 验证未通过提示
        }
      });
    }
  }
}
</script>

配置路由和组件

在你的项目中配置路由和组件，将 DynamicForm.vue 组件配置到相应的路由中。

使用动态表单组件

在你的项目中使用动态表单组件，只需要在需要的地方添加 <dynamic-form></dynamic-form> 即可。

<template>
  <div>
    <dynamic-form></dynamic-form>
  </div>
</template>

<script>
import DynamicForm from './DynamicForm.vue';

export default {
  components: {
    DynamicForm
  }
}
</script>

总结

通过结合 Vue 和 Element UI，我们很方便地实现了动态表单的功能。使用 Element UI 的表格和表单组件，配合 Vue 的数据双向绑定和表单验证功能，实现了新增行、删除行、动态表单验证以及提交功能。当然，根据实际需求，我们还可以进一步扩展和优化这个动态表单组件，使其更加符合我们的业务需求。

以上就是基于 Vue 和 Element UI 实现动态表单的简单示例。通过这个示例，希望能够帮助到大家快速掌握动态表单的实现方法。如果对于 Vue 或 Element UI 有任何疑问或想探讨更多相关的话题，欢迎在评论区留言。谢谢阅读！

本文来自极简博客，作者：人工智能梦工厂，转载请注明原文链接：Vue Element UI 实现动态表单