表單驗證:
需要注意的一點是:
普通表單驗證單項依靠的是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">
<template> <div> <el-form ref="form" :model="addForm" label-width="80px"> <div class="moreRules"> <div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key" > <el-row> <el-col :span="6"> <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-col> <el-col :span="6"> <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-col> <el-col :span="6"> <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-col> <el-col :span="6" align="center"> <el-button @click="deleteRules(item, index)">刪除</el-button> </el-col> </el-row> </div> <el-button @click="addUser">增加</el-button> <el-button @click="initData">清空</el-button> </div> </el-form> </div> </template> <script> export default { data() { return { addForm: { name: "", content: "", moreNotifyObject: [ { field: "", name: "", max: "", }, { field: "", name: "", max: "", }, ], }, }; }, methods: { 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); } }, }, }; </script> <style lang="scss" scoped> </style>