vue2.0+Element UI 实现动态增加删除多个表单（点击按钮增删一排输入框）

小灰灰 2021-09-13 18:20 1965阅读 1赞

# vue2.0+Element UI 实现动态增加删除多个表单（点击按钮增删一排输入框） #

**单个增加表单，Element文档已经给了详细的方案，这里就不详细介绍**  
今天介绍的是如图：

**点击增加按钮，然后增加如图文本框，点击删除。删除这一行的信息**  
![在这里插入图片描述][20210120145441605.png]  
实现：

<el-form  :model="testInfo"  label-width="100px"  :label-position="labelPosition" class="demo-ruleForm"  >
         <div class="button-search">
              <el-row>
               <span>Headers</span>
              </el-row>
              <el-button slot="append" icon="el-icon-plus" size="small" type="primary" @click="addHeader()">添加Header</el-button>
            </div>
            
            
          <div v-for="(item, index) in testInfo.headers" :key="index">
              <div class="div-inline">
                 <el-form-item
                   :prop="'headers.' + index + '.headerKey'"
                   :rules="{ required: true, message: '不能为空', trigger: 'blur' }"  style="width: 100px;">
    
                   <el-input v-model="item.headerKey"  ></el-input>
                 </el-form-item>
               </div>
    
             <span class="distance_style_10">=</span>
    
              <div class="div-inline distance_style_10">
                <el-form-item
                  :prop="'headers.' + index + '.headerVal'"
                  :rules="{ required: true, message: '不能为空', trigger: 'blur' }"  class="input_width_300">
    
                  <el-input v-model="item.headerVal"  ></el-input>
                </el-form-item>
              </div>
              
              <div class="div-inline distance_style_10">
                <el-form-item>
                  <el-link type="primary" :underline="false"  @click.prevent="removeHeader(item,index)">删除</el-link>
                </el-form-item>
              </div>
    
            </div>
     </el-form>

data中：

testInfo:{ 
            headers:[],
            headerKey:'',
            headerVal:'',
          },

methods中：

methods:{ 
        addHeader(){ 
          this.testInfo.headers.push({ 
            headerKey: '',
            headerVal: ''
          })
    
        },
        removeHeader(item, index){ 
          this.testInfo.headers.splice(index, 1)
        }
      }

style

.div-inline{ 
        display: inline-block;
    
      }
    
    .button-search{ 
      display: flex;
      justify-content: space-between;
    }

好了，完成了

[20210120145441605.png]: /images/20210913/a78abaafe8c9406cbcb87759c3e3caa5.png