前端实现动态模板框添加信息（ElementUI动态增减表多项）_elementui一次添加多个主体信息-优快云博客

本文介绍如何在Vue项目中利用ElementUI实现动态增减表单项，以满足在新增或编辑场景下添加多个成员信息的需求。通过ElementUI的组件和方法，可以便捷地构建这种动态表单。

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

1 项目需求

- - - 在新增修改中需要多添加多成员信息，用ElementUI动态增减表多项来实现

在新增修改中需要多添加多成员信息，用ElementUI动态增减表多项来实现

ElementUi展示代码

- - - 在新增修改中需要多添加多成员信息，用ElementUI动态增减表多项来实现

效果展示：

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      {
    required: true, message: '请输入邮箱地址', trigger: 'blur' },
      {
    type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
   
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form