vue 中 表單數據為數組，v-for 循環表單數據

 

 element-ui 中，表單數據一般為對象，但是也有是數組的情況，比如上面圖示：賬號和密碼可以是多個，點擊添加會增加一條，點擊刪除會刪除一條

表單數據為

form：{
  accounts：[
    {
       account: '',
       password: ''
    }  
  ]
}

表單中代碼

<el-form ref="form" :model="form" label-width="100px" label-suffix="：">
    <el-row v-for="(item, index) in form.accounts" :key="index">
       <el-col :span="11">
          <el-form-item
             label="系統賬號"
             :prop="`accounts.${index}.account`"
             :rules="[
               {required: true, message: '請輸入系統賬號', trigger: 'blur'},
               {validator: checkAccount, trigger: 'blur'},
               {min: 1, max: 16, message: '系統賬號至多只能包含16個字符', trigger: 'blur'}
             ]"
           >
             <el-input
               v-model="item.account"
               placeholder="請輸入系統賬號"
               clearable
               autocomplete="off"
              />
          </el-form-item>
       </el-col>
       <el-col :span="11">
           <el-form-item
              label="賬號密碼"
              :prop="`accounts.${index}.password`"
              :rules="[
                 {required: true, message: '請輸入賬號密碼', trigger: 'blur'},
                 {min: 1, max: 16, message: '賬號密碼至多只能包含16個字符', trigger: 'blur'}
              ]"
           >
             <el-input
               v-model="item.password"
               type="password"
               placeholder="請輸入賬號密碼"
               clearable
               autocomplete="new-password"
             />
          </el-form-item>

       </el-col>
       <el-col v-if="form.accounts.length >= 2" :span="2">
           <div class="form-control-delete">
             <el-button icon="el-icon-delete" circle class="btn-editDel" @click="deleteAccount(index)" />
           </div>
       </el-col>
   </el-row>
   <div class="form-control-add">
     <el-button icon="el-icon-plus" class="btn-add" @click="addAccount">添加賬號</el-button>
   </div>

</el-form>

驗證兩個賬號是否重復

data() {
  const checkAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入系統賬號'))
      } else {
        const len = this.form.accounts.length
        if (len <= 1) {
          callback()
        } else {
          const allAccount = this.form.accounts.map(v => v.account)
          const len = allAccount.length
          const filterAccount = allAccount.filter(v => v !== value)
          if (len - 1 === filterAccount.length) {
            callback()
          } else {
            callback(new Error('創建的系統賬號不能重復！'))
          }
        }
      }
    }

    return {
     checkAccount: checkAccount, 
   }
}