首先有一個這樣的需求，表單中預設有一個聯絡人資訊，使用者可以再新增新的聯絡人資訊

點選新增更多聯絡人之後

官方文件中有寫用v-for來實現新增表單，但是那是單表單的新增，現在多表單的新增，可以考慮的實現方法是先寫死一個必須的表單，需要新增的兩個表單放在一個div裡，在div中使用v-for生成，達到同時新增的效果

程式碼如下

//必填一個聯絡人的表單
<el-form-item class="rules" label="通知物件:" prop="notifyobject">
            <el-input v-model="ruleForm.notifyobject" placeholder="請輸入聯絡人名稱" :disabled="isReadonly" class="el-select_box"></el-input>
          </el-form-item>
          <el-form-item class="rules" label="郵箱:" prop="email">
            <el-input v-model="ruleForm.email" placeholder="請輸入郵箱" :disabled="isReadonly" class="el-select_box"></el-input>
          </el-form-item> 
//動態生成的聯絡人表單
          <div class="moreRules">
            <div class="moreRulesIn" v-for="(item, index) in ruleForm.moreNotifyObject" :key="item.key">
              <el-form-item class="rules" label="通知物件:" :prop="'moreNotifyObject.' + index +'.notifyobject'" :rules="moreNotifyOjbectRules.moreNotifyOjbectName">
                <el-input v-model="item.notifyobject" placeholder="請輸入聯絡人名稱" :disabled="isReadonly" class="el-select_box"></el-input>
              </el-form-item>
              <el-form-item class="rules" label="郵箱:" :prop="'moreNotifyObject.'+ index +'.email'" :rules="moreNotifyOjbectRules.moreNotifyOjbectEmail">
                <el-input v-model="item.email" placeholder="請輸入郵箱" :disabled="isReadonly" class="el-select_box"></el-input>
              </el-form-item>
              <el-button @click="deleteRules(item, index)" :disabled="isReadonly">刪除</el-button>
            </div>
          </div>
          <el-form-item v-show="!isRead">
            <el-button type="text" class="addUser" @click="addUser" :disabled="isReadonly"><i class="iconfont icon-tianjialianxiren"></i>新增更多聯絡人</el-button>
          </el-form-item>
 

和普通表單驗證不同的是，動態表單要新增自己的驗證規則，和新增普通表單的方式一樣

     ruleForm:{
    //普通表單的驗證規則
}，
//新增表單的驗證規則
     moreNotifyOjbectRules: {
        moreNotifyOjbectName: [{ required: true, message: '請輸入聯絡人名稱', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value.length > 15 || value.length < 2) {
                callback(new Error('長度必須為2~8個字元'))
              } else {
                var reg = new RegExp("[`
 
[email protected]#$^&*()=|{}':',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
                if (reg.test(value)) {
                  callback(new Error('不能含有特殊字元'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }
        ],
        moreNotifyOjbectEmail: [{ required: true, message: '請輸入郵箱地址', trigger: 'blur' },
          { type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur' }
        ]
      }
 

這裡需要注意的是：rules是每個表單都要都要新增的，有多個的話就要給每個表單繫結一個規則

<el-form-item class="rules" label="通知物件:" :prop="'moreNotifyObject.' + index +'.notifyobject'" :rules="moreNotifyOjbectRules.moreNotifyOjbectName">

<el-form-item class="rules" label="郵箱:" :prop="'moreNotifyObject.'+ index +'.email'" :rules="moreNotifyOjbectRules.moreNotifyOjbectEmail">

另外要注意的是：prop，正常表單驗證單項是依靠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 ruleForm.moreNotifyObject" :key="item.key">

還有要注意的就是v-for繫結的陣列也要在表單的物件裡，寫在表單物件外是驗證不了的，在data裡新增

ruleform：{
    moreNotifyObject: [{
          notifyobject: '',
          email: ''
        }]
}

然後新增聯絡人的函式應該這樣寫

 addUser() {
      this.ruleForm.moreNotifyObject.push({
        notifyobject: '',
        email: ''
      })
    }

同理刪除聯絡人也是

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

如果一開始只想讓預設必填的表單顯示，而新增的不顯示，如文章最開頭的表現一樣，則可以在methods中初始化v-for繫結的陣列

methods：{
    //初始化資料
    initData(){
        this.ruleFrom.moreNotifyObject = []
    }
}

參考文章