动态增加表单vue element ui

 

1、页面部分

                  <div v-for="(item, index) in editForm.dynamicItem" :key="index">

                     <el-row  class="iputrowclass">

                        <el-col :span="10">

                              <el-form-item

                                  label="key"

                                  :rules="{

                                      required: true, message: 'key不能为空', trigger: 'blur'

                                  }"

                              >

                                <el-input v-model="item.name" size="mini"></el-input>

                          </el-form-item>

                        </el-col>

                       <el-col :span="10">

                          <el-form-item

                          class="inputvalue"

                              label="value"

                              :rules="[

                                  {required: true, message: 'value不能为空', trigger: 'blur'},

                                ]"

                              >

                              <el-input v-model="item.value"  size="mini" ></el-input>

                          </el-form-item>

                          </el-col>

                          <el-col :span="2">

                               <el-form-item>

                            <div class="inputicon">

                                     <i class="el-icon-delete" @click="deleteItem(item, index)"></i>

                            </div>

                              </el-form-item>

                          </el-col>

                  </el-row>

              </div>

2、js部分数据部分

export default {

  data() {

    return {

        dynamicItem: []

}

3、js部分方法部分

addItem () {

      this.editForm.dynamicItem.push({

        name: '',

        value: ''

      })

    },

    deleteItem (item, index) {

      console.log("index===="+index)

      this.editForm.dynamicItem.splice(index, 1)

    }