核心點(diǎn)：外層循環(huán)是item和index，內(nèi)層循環(huán)是item2和index2
如果都是定義的同一個屬性名
外層循環(huán)得寫:prop="'block.'+index+'.numerical'"
同理內(nèi)層循環(huán)就得寫:prop="'objectSpecs.'+ index2 + '.numerical'"文章來源：http://www.zghlxwxcb.cn/news/detail-641722.html
校驗(yàn)函數(shù)方法
:rules="getRules(item2, item2.name)"文章來源地址http://www.zghlxwxcb.cn/news/detail-641722.html
<div class="block" v-for="(item, index) in block" :key="index">
<el-form ref="blockForm" :model="item" :rules="formBlockRule" :inline="true">
<el-form-item>多個formItem...省略一下</el-form-item>
<div v-for="(item2,index2) in item.objectSpecs" :key="index2">
<!--輸入框-->
<el-form-item v-if="item2.input"
:prop="'objectSpecs.' + index2 + '.numerical'"
:label="item2.name" label-width="130px"
:rules="getRules(item2, item2.name)">
<el-input :placeholder="item2.placeholder"
v-model="item2.numerical"
:onkeyup="numberFormate(item2, 'numerical')"
:disabled="readOnly">
</el-input>
</el-form-item>
<el-form-item v-if="item2.input">
<span>{{item2.units}}</span>
</el-form-item>
<!--選擇框-->
<el-form-item v-if="!item2.input"
:prop="'objectSpecs.' + index2 + '.numerical'"
:label="item2.name" label-width="130px"
:rules="getRules(item2, item2.name)">
<el-select v-model="item2.numerical"
placeholder="請選擇"
:disabled="readOnly">
<el-option v-for="(key,value) in item2.numericalList"
:key="value"
:label="key"
:value="value">
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
getRules(item, name) {
if(item.input){
return [
{ required: true, message: '請輸入' + name, trigger: 'blur' },
]
}else{
return [
{ required: true, message: '請選擇' + name, trigger: 'change' }
];
}
}
到了這里，關(guān)于vue+element多層表單校驗(yàn)prop和rules的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
