1. 程式人生 > 其它 >vue 中 表單資料為陣列,v-for 迴圈表單資料

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, 
   }
}