关于vue的UI框架Element，多层嵌套v-for循环下的表单验证

以下为一层嵌套

<el-form-item  v-for="(item,itemIndex) in form.button" :key="item.itemIndex"  label="一级菜单" >
        <el-form-item  :prop="'button.'+ itemIndex + '.name'" :rules="rules.inputTxt">
                <el-input v-model="item.name" style="width:200px;"></el-input>
        </el-form-item>
</el-form-item>

以下为两层，承接上一层的循环

<div v-for="(button,index) in item.sub_button" :key="button.index">
     <el-form-item  :prop="'button.'+ itemIndex +'.sub_button.'+ index + '.name'" :rules="rules.inputTxt" >
               <el-input v-model="button.name" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item  :prop="'button.'+ itemIndex +'.sub_button.'+ index + '.key'" :rules="rules.inputTxt" >
               <el-input v-model="button.key" style="width:200px;"></el-input>
        </el-form-item>
</el-form-item>

踩坑点
1，prop属性变成动态绑定的 ：prop，
2，每一值外面都需要嵌套一层el-form-item，用来绑定prop的值还有 rules
3，:prop="‘button.’+ itemIndex + ‘.name’" 不能直接写成:prop=“item.name” ，
一定要写成循环的数组的真实的名字，用item是无法指向到对应的值的