Element-Ui表单嵌套循环时的验证

00程序猿

已于 2022-08-26 12:11:39 修改

阅读量958

点赞数

文章标签： elementui

于 2022-08-26 12:07:17 首次发布

本文链接：https://blog.csdn.net/wqewqeasxzcbn/article/details/126540291

版权

本文探讨了在使用Element-UI时遇到的表单嵌套循环验证问题。重点介绍了如何处理数据结构中包含数组的情况，特别是验证数组内每个对象的属性。关键点包括动态绑定prop属性和正确指定验证字段路径，例如：:prop="‘button.’+ index + ‘.name’"。同时，手动触发验证时需使用特定语法：this.$refs.form.validateField('productItems.'+index+'.name')。

摘要由CSDN通过智能技术生成

先看一下表单嵌套的结构

数据结构是这样的

<el-form ref="form" :model="creatOrderObj" label-width="120px" :rules="rules">
    <el-form-item label="标题" prop="title">
        <el-input v-model.trim="creatOrderObj.title"></el-input>
    </el-form-item>
    <el-form-item label="商品信息" required>
        <el-button @click="AddGoods" style="margin-bottom:15px" type="primary">
            添加商品                                
        </el-button>
        <el-card v-for="(item,index) in creatOrderObj.productItems" :key="index" style="margin-bottom:15px">
            <el-form-item label="商品名称" :prop="'productItems.'&