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

项目中用到了表单的多层嵌套v-for循环来验证表单，这个也是我在网上看的，然后我自己总结了一下，希望对大家有用。

这是第一层的循环:

<el-form label-width="80px" :model="formLabelAlign">
      <el-form-item v-for="(item, index) in formLabelAlign.arr" :key="index">
        <el-form-item :prop="'arr.' + index + '.name'">
          <el-input v-model="item.name" style="width: 200px"></el-input>
        </el-form-item>
      </el-form-item>
    </el-form>

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

   <div v-for="(v, i) in item.brr" :key="i">
          <el-form-item label="二级菜单" :prop="'arr.' + index + '.brr.' + index + '.name'" >
            <el-input v-model="v.name" style="width: 200px"></el-input>
          </el-form-item>
        </div>

总体循环是为:

 <el-form label-width="80px" :model="formLabelAlign">
      <el-form-item
        v-for="(item, index) in formLabelAlign.arr"
        :key="index"
        label="一级菜单"
      >
        <el-form-item :prop="'arr.' + index + '.name'">
          <el-input v-model="item.name" style="width: 200px"></el-input>
        </el-form-item>
        <div v-for="(v, i) in item.brr" :key="i">
          <el-form-item
            label="二级菜单"
            :prop="'arr.' + index + '.brr.' + index + '.name'"
          >
            <el-input v-model="v.name" style="width: 200px"></el-input>
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>

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

原文链接：blog.csdn.net/qq_42350820…