先上代碼:
.........
<div class="dialogCheckbox">
<el-form
ref="dialogCheckbox"
:model="dialogCheckbox"
label-width="200px"
label-position="left"
:rules="dialogCheckRules"
>
<el-form-item label="選項(xiàng)名稱(可不寫)" prop="label">
<el-input v-model="dialogCheckbox.label"></el-input>
</el-form-item>
<el-form-item
label="多選框名稱(可不寫)"
v-for="(item, index) in dialogCheckbox.nameArr"
:key="index"
:prop="'nameArr.' + index + ('.name' + index)"
:rules="dialogCheckRules['name' + index]"
>
<!-- :prop="'name' + index" -->
<!-- <el-form-item
label="多選框名稱(可不寫)"
v-for="(item, index) in dialogCheckbox.nameArr"
:key="index"
:prop="dialogCheckbox.nameArr[index].name"
> -->
<el-input v-model="item['name' + index]"></el-input>
</el-form-item>
</el-form>
</div>
數(shù)據(jù)格式:
...........
dialogCheckbox: {
label: "",
nameArr: [
// {
// name0: "",
// name:"name0"
// }
],
},
dialogCheckRules: {
label: [{ required: true, message: "請(qǐng)輸入選項(xiàng)名稱", trigger: "blur" }],
// name0: [
// { required: true, message: '請(qǐng)輸入多選框名稱', trigger: 'blur' },
// ],
},
在對(duì)其中的標(biāo)簽<el-form-item>進(jìn)行for循環(huán)的時(shí)候希痴,需要?jiǎng)討B(tài)添加prop和rule豁遭,其中特別注意的是prop內(nèi)部的寫法