vue填坑系列之配置权限菜单列表

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

2018年09月30日 10:09:41 雷火小盾 阅读数：1528

 版权声明：转载请附上地址 https://blog.csdn.net/qq_42350820/article/details/82905921

以下为一层嵌套

<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是无法指向到对应的值的

 

每隔一段时间不定期更新中，本人菜鸟一枚，希望在vue填坑的路上能帮助到大家，有疑问欢迎留言···

 

参考文章：https://blog.csdn.net/qq_42350820/article/details/82905921