总结:
第一次遍历时
:prop = " '第一层被遍历的数组名.(注意这个点 单引号内全为string)' + index(第一层遍历时定义的index)+ '.(注意这个点 本单引号内为string)当前字段名' "
第二次遍历时
:prop="'第一层被遍历的数组名.(注意这个点 单引号内全为string)' + index(第一层遍历时定义的index)+ '.(注意单引号内的两个点)第二层被遍历的数组名. + 'ind(第二层遍历时定义的index)' + '.(注意点)当前字段名' '"
根据具体使用情景 可以结合行内:rules
<template>
<el-form
:model="dialogForm"
:rules="rules"
ref="dialogForm"
label-width="130px"
label-position="right"
v-loading="isLoading"
>
<div class="add-btn">
<el-button
icon="el-icon-plus"
type="success"
size="small"
@click="add"
>新增按钮</el-button
>
</div>
<el-form-item
label="版块标题:"
prop="parentTitle"
:rules="rules.parentTitle"
>
<el-input
size="medium"
show-word-limit
type="text"
v-model="dialogForm.parentTitle"
maxlength="10"
placeholder="版块标题"
></el-input>
</el-form-item>
<el-form-item label="是否自动轮播:" prop="ifRotation" v-if="false">
<el-radio-group v-model="dialogForm.ifRotation" size="medium">
<el-radio-button :label="true">是</el-radio-button>
<el-radio-button :label="false">否</el-radio-button>
</el-radio-group>
</el-form-item>
<div
class="swipe-ul"
v-for="(item, index) in dialogForm.contentDTOS"
:key="index"
>
<div class="delete-swipe">
<el-button
type="danger"
icon="el-icon-delete"
circle
@click="delSwipe(index)"
>删除一条</el-button>
</div>
<el-form-item
label="内容主标题:"
:prop="'contentDTOS.' + index + '.componentContentParentTitle'"
:rules="rules.parentTitle"
>
<el-input
size="medium"
show-word-limit
type="text"
v-model="item.componentContentParentTitle"
maxlength="20"
placeholder="请输入内容主标题"
></el-input>
</el-form-item>
<el-form-item label="内容按钮配置:" prop="buttonDTOS">
<div class="add-btn">
<el-button
icon="el-icon-plus"
type="success"
size="small"
round
@click="addBtn(index)"
>
新增按钮配置</el-button
>
</div>
</el-form-item>
<div
v-for="(it, ind) in item.buttonDTOS"
:key="ind"
class="btn-config"
>
<div class="delete-btn">
<i
class="el-icon-circle-close"
@click="delBtn(index, it, ind)"
></i>
</div>
<el-form-item
label="跳转按钮名称:"
:prop="
'contentDTOS.' + index + '.buttonDTOS.' + ind + '.buttonName'
"
:rules="rules.buttonName"
>
<el-input
size="medium"
show-word-limit
type="text"
v-model="it.buttonName"
maxlength="8"
placeholder="请输入按钮名称"
></el-input>
</el-form-item>
<el-form-item
v-if="Number(it.buttonType) === 3"
:prop="'contentDTOS.' + index + '.buttonDTOS.' + ind + '.jumpUrl'"
:rules="rules.jumpUrl"
>
</el-form-item>
</div>
</div>
</el-form>
</template>
<script>
data(){
return {
rules: {
height: [
{ required: true, message: "请输入轮播图高度", trigger: "blur" },
],
jumpUrl: { required: true, message: "请输入跳转路径", trigger: "blur" },
}, // 校验规则
}
}
</script>