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

客官°小女子只卖身不卖艺 2022-05-09 03:22 637阅读 0赞

以下为一层嵌套

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

[item.name]: http://item.name

发表评论取消回复

表情：

评论列表（有 0 条评论，637人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue element-ui深层表单验证

方法1：在rule中这样设置 ![b3408d4ea9e944d8802095caedaae8e5.png][] 在 el-form-item标签中这样使用 ![

本是古典何须时尚/ 2023年10月09日 14:15/ 0 赞/ 117 阅读

相关 element-ui表单验证实例

<template> <div class="main"> <div class="login"> <el-form

约定不等于承诺〃/ 2023年10月06日 17:52/ 0 赞/ 138 阅读

相关 vue 使用 element-ui表单验证

手机号： var validateMobilePhone = (rule, value, callback) => \{ if (value === ‘’) \{ c

古城微笑少年丶/ 2023年05月29日 13:01/ 0 赞/ 25 阅读

相关 Element循环表单验证（单层循环与双重循环）

Element的表单验证要注意的就是v-model和prop的值要对应上，不然无法触发验证 1.单层循环表单 html代码如下： <el-form :model

深碍√TFBOYSˉ_/ 2023年05月21日 08:46/ 0 赞/ 24 阅读

相关 element-ui 表单验证

<el-form ref="form" :model="form" :rules="rules" label-width="0px" class="demo-ruleF

小鱼儿/ 2023年03月14日 13:30/ 0 赞/ 150 阅读

相关 element-ui多个表单如何同时验证

<template> <div> <div v-for="(item,index) in Data" :key="index">

╰+攻爆jí腚メ/ 2022年12月31日 15:20/ 0 赞/ 385 阅读

相关 element ui 多层dialog嵌套

我的情况是，在一个弹框中，点击按钮再弹出了一个弹框，第二个弹框被蒙层遮住了。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

川长思鸟来/ 2022年10月07日 13:58/ 0 赞/ 397 阅读

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

以下为一层嵌套 <el-form-item v-for="(item,itemIndex) in form.button" :key="item.itemIndex

客官°小女子只卖身不卖艺/ 2022年05月09日 03:22/ 0 赞/ 638 阅读

相关关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解：来自”和“小编的小提示：首先打印一下this.$refs\[formName\]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的for

忘是亡心i/ 2022年03月11日 16:52/ 0 赞/ 815 阅读

相关 VUE Element-ui 表单自定义验证规则

验证规则：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误 HTML代码： <el-form :model="modifyForm"

淡淡的烟草味﹌/ 2021年07月25日 11:27/ 0 赞/ 707 阅读