vue+ElementUI動態生成新表單並添加驗證

需求，表中默認有一個with攜帶參數表，點擊添加能夠新增一條with數據。並能夠動態的增長和刪除，利用vue綁定數組對象並循環輸出列表。

期初示意圖：

點擊添加更多攜帶參數時，新增數據集，以下圖所示：

elementUI官網有對單表單的添加，如今對多表單的添加，考慮的實現方式是，先寫死一個必須的表單，須要新增表單的放在一個div裏，在div中使用v-for生成，達到同時增長的效果。

代碼以下：

<!-- 已存在的 -->
          <el-form-item  label="field" prop="field"  :rules="[{required: true, message: '請完善信息'}]">
              <el-input v-model="field" placeholder="請輸入field"></el-input>
              </el-form-item>
              <el-form-item  label="name" prop="name" :rules="[{required: true, message: '請完善信息'}]">
              <el-input v-model="name" placeholder="請輸入name"></el-input>
              </el-form-item>
              <el-form-item  label="max" prop="max":rules="[{required: true, message: '請完善信息'}]">
              <el-input v-model="max" placeholder="請輸入max"></el-input>
        </el-form-item>  

          <!-- 動態生成 -->
          <div class="moreRules">
          <div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key" >
              <el-form-item  label="field" :prop="'moreNotifyObject.' + index +'.field'"  :rules="[{required: true, message: '請完善信息'}]">
              <el-input v-model="item.field" placeholder="請輸入field"  class="el-select_box"></el-input>
              </el-form-item>
              <el-form-item  label="name" :prop="'moreNotifyObject.'+ index +'.name'":rules="[{required: true, message: '請完善信息'}]">
              <el-input v-model="item.name" placeholder="請輸入name"  class="el-select_box"></el-input>
              </el-form-item>
              <el-form-item  label="max" :prop="'moreNotifyObject.'+ index +'.max'":rules="[{required: true, message: '請完善信息'}]">
              <el-input v-model="item.max" placeholder="請輸入max"  class="el-select_box"></el-input>
              </el-form-item>
              <el-button @click="deleteRules(item, index)" >刪除</el-button>
          </div>
          </div>

須要注意的一點是：

普通表單驗證單項依靠的是prop..而動態生成的表單要用:prop

書寫的語法是:prop="'moreNotifyObject.' + index +'.notifyobject'"，moreNotifyObject是v-for綁定的數組，index是索引，notifyobject是表單綁定的v-model的名稱，而後用.把他們連接起來。

因此總結起來的語法就是:prop="'v-for綁定的數組.' + index + '.v-model綁定的變量'"

還有一個須要注意就是v-for的寫法，要將表單的model名寫進去

<div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key">

 數據代碼以下：

addForm:{
            name:'',
            content:'',
            moreNotifyObject:[{
              field:'',
              name:'',
              max:''
            }]
        },

數據初始化：

// 數據初始化
      initData(){
            this.addForm.moreNotifyObject = []
      },

點擊新增按鈕時代碼：

 addUser() {
            this.addForm.moreNotifyObject.push({
                field:'',
                name:'',
                max:'',
          })
      },

刪除行：

      deleteRules(item, index) {
            this.index = this.addForm.moreNotifyObject.indexOf(item)
            if (index !== -1) {
                this.addForm.moreNotifyObject.splice(index, 1)
            }
      },

參考文章：https://blog.csdn.net/weixin_41041379/article/details/81908788