在element ui 表單中 根據業務需要，有時候我們會遇到表單多層嵌套的prop 校驗與重置的需要。這時候 就需要在
<el-form-item>標簽中嵌套<el-form-item>，並且
el-form-item 標簽的:prop屬性，必須是其父級組件el-form中綁定model字段中的一個直接子屬性。比如某個字段我們可以通過this.form.user_info[0].name獲取到，
那么我們就需要設置prop為user_info[0].name，這樣就可以添加校驗規則了，其他嵌套情況也一樣。如下：
<el-form-item v-for="(info, index) in form.user_info" :prop="'user_info.' + index + '.name'" > <el-input v-model="info.name"></el-input> </el-form-item> form: { user_info: [ { name: '', sex: '', age: '' }, { name: '', sex: '', age: '' } ] }
完整實例【步驟2、3即采用多層嵌套，通過：prop 來重置表單】，效果如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>編輯問卷</title> <link rel="stylesheet" href="../plugin/bootstrap4/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.15.7/theme-chalk/index.css"> <script src="https://lib.baomitu.com/element-ui/2.15.7/index.js"></script> <style type="text/css"> .index { padding: 20px 30px; } .el-form { text-align: center; } .el-form-item { margin: 22px auto; } .el-steps { justify-content: center; } .radio-margin { margin-left: 20px; } .el-radio { margin: 20px 0; } .el-checkbox { margin-top: 20px; margin-right: 0; } /* 步驟條整體居中樣式 */ .el-step__icon.is-text { left: 50%; transform: translateX(-50%); } .el-step.is-horizontal .el-step__line { left: 50%; width: 100%; } .el-step__title { text-align: center; } </style> </head> <body> <div id="edit" class="index"> <el-steps :space="200" :active="form.steps.index" finish-status="success"> <el-step :title="form.steps.stepTitle1"></el-step> <el-step :title="form.steps.stepTitle2"></el-step> <el-step :title="form.steps.stepTitle3"></el-step> <el-step :title="form.steps.stepTitle4"></el-step> </el-steps> <el-form ref="form" :model="form" label-width="180px"> <div id="" v-show="form.isShow1"> <strong>配置問卷</strong> <el-form-item label="調查問卷名稱：" prop="name" style="width: 500px"> <el-input v-model="form.name" placeholder="請輸入問卷名稱"></el-input> </el-form-item> <el-form-item label="請設置單選題的數量：" prop="number1" style="width: 500px"> <el-input v-model="form.number1" placeholder="請輸入單選題的數量"></el-input> </el-form-item> <el-form-item label="請設置多選題的數量：" prop="number2" style="width: 500px"> <el-input v-model="form.number2" placeholder="請輸入多選題的數量"></el-input> </el-form-item> <el-form-item label="請設置問答題的數量：" prop="number3" style="width: 500px"> <el-input v-model="form.number3" placeholder="請輸入問答題的數量"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="doNext">下一步</el-button> </el-form-item> </div> <div id="" v-show="form.isShow2"> <strong>配置單選題</strong> <span v-for="(item,index) in form.problemSingleArr"> <el-form-item :label="item.label+'：'" :prop="'problemSingleArr.' + index + '.'+ item.prop"> <el-input :autosize="{ minRows: 5}" type="textarea" v-model="item[item.prop]" placeholder="請輸入問題"></el-input> </el-form-item> <template v-for="(e, i) in item.arr "> <el-form-item :prop="'problemSingleArr.'+ index + '.arr.' + i + '.'+ e.prop"> <el-radio-group v-model="e[e.prop]"> <template v-for="(j,x) in e.option"> <el-radio :label="j.label" style="display: block;"> {{j.label}} <el-form-item :prop="'problemSingleArr.'+ index + '.arr.' + i + '.option.' + x + '.' + j.prop " style="display: inline-block;"> <el-input v-model="j[j.prop] " :placeholder=`請輸入${j.label}選項對應的答案` class="radio-margin"></el-input> </el-form-item> </el-radio> </template> </el-radio-group> </el-form-item> </template> </span> <el-form-item> <el-button type="primary" @click="doNext">下一步</el-button> <el-button @click="doBack">上一步</el-button> </el-form-item> </div> <div v-show="form.isShow3"> <strong>配置多選題</strong> <span v-for="(item,index) in form.problemMoreArr"> <el-form-item :label="item.label+'：'" :prop="'problemMoreArr.' + index + '.'+ item.prop"> <el-input :autosize="{ minRows: 5}" type="textarea" v-model="item[item.prop]" placeholder="請輸入問題"></el-input> </el-form-item> <template v-for="(e, i) in item.arr "> <el-form-item :prop="'problemMoreArr.'+ index + '.arr.' + i + '.'+ e.prop"> <el-checkbox-group v-model="e[e.prop]"> <template v-for="(j,x) in e.option"> <el-checkbox :label="j.label" style="display: block;"> {{j.label}} <el-form-item :prop="'problemMoreArr.'+ index + '.arr.' + i + '.option.' + x + '.' + j.prop " style="display: inline-block;"> <el-input v-model="j[j.prop] " :placeholder=`請輸入${j.label}選項對應的答案` class="radio-margin"></el-input> </el-form-item> </el-checkbox> </template> </el-checkbox-group> </el-form-item> </template> </span> <el-form-item> <el-button type="primary" @click="doNext">下一步</el-button> <el-button @click="doBack">上一步</el-button> </el-form-item> </div> <div v-show="form.isShow4"> <strong>配置問答題</strong> <span v-for="(item, index) in essayQuestionArr"> <el-form-item :label="item.label" :prop="item.prop"> <el-input :autosize="{ minRows: 5}" type="textarea" v-model="form[item.prop]" placeholder="請輸入問答題"></el-input> </el-form-item> </span> <el-form-item> <el-button type="primary" @click="doNext">完成</el-button> <el-button @click="doBack">上一步</el-button> </el-form-item> </div> </el-form> </div> <script src="../js/jquery-1.10.2.min.js"></script> <script src="../plugin/bootstrap4/js/bootstrap.min.js"></script> <script src="../js/config.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#edit', data: { essayQuestionArr: [ { question: '', label: '問答題1', prop: 'essayQuestion1', answer: '' }, { question: '', label: '問答題2', prop: 'essayQuestion2', answer: '' } ], form: { steps: { index: 0, stepTitle1: '進行中', stepTitle2: '待進行', stepTitle3: '待進行', stepTitle4: '待進行', }, isShow4: false, isShow3: false, isShow2: false, isShow1: true, name: '', number1: '', number2: '', number3: '', problemSingleArr: [ { label: '問題1', prop: 'problemArea', problemArea: '', arr: [ { label: 'A', prop: 'problemSingle', problemSingle: '', option: [ { label: 'A', prop: 'problemTextA', problemTextA: '' }, { label: 'B', prop: 'problemTextB', problemTextB: '' }, { label: 'C', prop: 'problemTextC', problemTextC: '' }, { label: 'D', prop: 'problemTextD', problemTextD: '' }, ] } ] }, { label: '問題2', prop: 'problemArea', problemArea: '', arr: [ { label: 'A', prop: 'problemSingle', problemSingle: '', option: [ { label: 'A', prop: 'problemTextA', problemTextA: '' }, { label: 'B', prop: 'problemTextB', problemTextB: '' }, { label: 'C', prop: 'problemTextC', problemTextC: '' }, { label: 'D', prop: 'problemTextD', problemTextD: '' }, ] } ] } ], problemMoreArr:[ { label: '問題一', prop: 'problemArea', problemArea: '', arr: [ { label: 'A', prop: 'problemMore', problemMore: [], option: [ { label: 'A', prop: 'problemTextA', problemTextA: '' }, { label: 'B', prop: 'problemTextB', problemTextB: '' }, { label: 'C', prop: 'problemTextC', problemTextC: '' }, { label: 'D', prop: 'problemTextD', problemTextD: '' }, ] } ] }, { label: '問題二', prop: 'problemArea', problemArea: '', arr: [ { label: 'A', prop: 'problemMore', problemMore: [], option: [ { label: 'A', prop: 'problemTextA', problemTextA: '' }, { label: 'B', prop: 'problemTextB', problemTextB: '' }, { label: 'C', prop: 'problemTextC', problemTextC: '' }, { label: 'D', prop: 'problemTextD', problemTextD: '' }, ] } ] } ], essayQuestion1: '', essayQuestion2: '', } }, methods: { doBack() { this.form.steps.index--; switch (this.form.steps.index) { case 0: this.form.steps.stepTitle1 = '進行中' this.form.steps.stepTitle2 = '待進行' this.form.isShow1 = true; this.form.isShow2 = false; break; case 1: this.form.steps.stepTitle2 = '進行中' this.form.steps.stepTitle3 = '待進行' this.form.isShow2 = true; this.form.isShow3 = false; break; default: this.form.steps.stepTitle3 = '進行中' this.form.steps.stepTitle4 = '待進行' this.form.isShow3 = true; this.form.isShow4 = false; } }, doNext() { this.form.steps.index++; switch (this.form.steps.index) { case 1: this.form.steps.stepTitle1 = '已完成' this.form.steps.stepTitle2 = '進行中' this.form.isShow1 = false; this.form.isShow2 = true; break; case 2: this.form.steps.stepTitle2 = '已完成' this.form.steps.stepTitle3 = '進行中' this.form.isShow2 = false; this.form.isShow3 = true; break; case 3: this.form.steps.stepTitle3 = '已完成' this.form.steps.stepTitle4 = '進行中' this.form.isShow3 = false; this.form.isShow4 = true; break; default: this.form.steps = { index: 0, stepTitle1: '進行中', stepTitle2: '待進行', stepTitle3: '待進行', stepTitle4: '待進行', } this.form.isShow4 = false this.form.isShow3 = false this.form.isShow2 = false this.form.isShow1 = true this.submitForm('form') } }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { console.log('submit!'); this.resetForm(formName) } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } }, }) </script> </body> </html>
參考過鏈接：ElementUI表單校驗prop的嵌套寫法 - SegmentFault 思否