elemenui 动态添加表单且提交校验必填

Element UI是一个基于Vue.js的开源UI组件库，它提供了一套丰富的前端界面解决方案。动态添加表单并实现实时验证必填字段通常涉及到以下几个步骤：

1. 引入Element UI的表单组件：首先，在Vue项目中安装并引入`element-ui`，然后导入你需要的表单组件，如`el-form`, `el-form-item`, 和`el-button`。

import { ElForm, ElFormItem } from "element-plus";

2. 创建一个表单模板：创建一个基础的表单结构，并设置每个必填字段的`required`属性为`true`。

<template>
  <el-form v-model="form" :inline="true" @submit.prevent="submitForm">
    <el-form-item prop="name" label="姓名" :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"></el-form-item>
    <!-- 添加更多必填项... -->
    <el-form-item prop="email" label="邮箱" :rules="{ required: true, type: 'email', message: '请输入有效的邮箱地址' }"></el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addFormItem">新增必填项</el-button>
    </el-form-item>
  </el-form>
</template>

3. 动态添加表单元素：在JavaScript里，你可以创建一个函数`addFormItem`，当点击按钮时，通过`v-for`循环动态生成新的表单项。

data() {
  return {
    form: {},
    items: [] // 存放动态生成的表单项
  };
},
methods: {
  addFormItem() {
    this.items.push({
      prop: 'field_' + (this.items.length + 1), // 新增字段名，比如 field_1, field_2...
      label: '新字段',
      required: true,
      rules: {} // 根据需要自定义验证规则
    });
    // 将新生成的项添加到表单中
    this.$refs.form.addRule(this.items[this.items.length - 1]);
  },
  submitForm() {
    if (!this.validateForm()) {
      console.log('表单有误');
      return;
    }
    // 提交表单...
  },
  validateForm() {
    // 使用 Element UI 的 validate 方法，如果所有必填项都有值，则返回 true
    const valid = this.$refs.form.validate();
    return valid;
  }
}