vue+element UI 实战点击按钮添加一组输入框

 点击添加实验组  ，添加一组输入框,点击减号删除一组输入框

  <el-button type="primary" style="margin-left:30px" @click="addItem">添加实验组</el-button>

  <div class="form"
             v-show="dialogForm"
             v-for="(item,index) in List"
             :key="index"
             style="position: relative"
        >
          <el-form :model="form"
                   class="show"
                   :label-position="labelPosition"
                   style="text-align:left"
                   prop="defaultgrup"
                   ref="form"
          >

            <el-button icon="el-icon-minus"
                       @click="deleteItem(item,index)"
                       circle
                       style="font-size:10px;   position: absolute; left:1px"/>

            <el-form-item class="el-icon-remove-outline"
                          :label="&quot;实验组&quot;+index"
                          :label-width="formWidth"
                          prop="id"
            >
              <el-input v-model="item.id"
                        style="width:430px"
                        autocomplete="off"/>
            </el-form-item>

            <el-form-item label="灰度" :label-width="formWidth" prop="date1" >
              <el-input v-model="item.date1"
                        style="width:430px"

                        autocomplete="off"/>
            </el-form-item>
          </el-form>
        </div>

 List: []

methods:{
addItem() {
      this.dialogForm = true

      this.List.push({
        id: '',
        date1: ''
      })
    },
    deleteItem(item, index) {
      console.log(index)
      this.List.splice(index, 1)
    }
}

效果如下：