先上代码:
.........
<div class="dialogCheckbox">
<el-form
ref="dialogCheckbox"
:model="dialogCheckbox"
label-width="200px"
label-position="left"
:rules="dialogCheckRules"
>
<el-form-item label="选项名称(可不写)" 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>
数据格式:
...........
dialogCheckbox: {
label: "",
nameArr: [
// {
// name0: "",
// name:"name0"
// }
],
},
dialogCheckRules: {
label: [{ required: true, message: "请输入选项名称", trigger: "blur" }],
// name0: [
// { required: true, message: '请输入多选框名称', trigger: 'blur' },
// ],
},
在对其中的标签<el-form-item>进行for循环的时候,需要动态添加prop和rule,其中特别注意的是prop内部的写法