element-ui中的多层表单循环验证处理

项目中有如下需求：

可以添加一个列表 => 添加弹框 => 里面可以添加多个产品（产品里面可以添加多个对接人跟政策），所以数据结构应该如下ruleForm: {companyName: '', // 公司名称financialProduct: [// 产品数组{productName: '', // 产品名称dockingPerson: [// 对接人{dockingName: '', // 联系人}],financialPolicy: [// 返利政策{makeWay: '', // 计提条件}]}]},

但是在提交表单的时候验证不了，rule不起作用，因为数据是循环出来的，所以不起作用，解决办法如下

<template><div class="addProduct_wrapper"><!-- 中间内容区域 --><div class="center_content"><el-formref="ruleForm":model="ruleForm"label-width="80px":rules="rules"><!-- 上方的列表 --><div class="basic_info"><div class="info_box"><el-form-item label="公司名称" prop="companyName"><el-input placeholder="请输入公司的名称" v-model="ruleForm.companyName"></el-input></el-form-item></div><!-- 产品盒子 --><div class="product_box" v-for="(item, index) in ruleForm.financialProduct" :key="index"><!-- 关闭按钮 --><span class="closeBtn" @click="delateProduct(index)" v-if="index !== 0">X</span><!-- 产品详情 --><div class="product_detail"><el-form-item label="产品详情"></el-form-item><!-- name盒子 --><div class="name_box"><div style="width: 300px;"><el-form-item label="产品名称":prop="`financialProduct.${index}.productName`":rules="financialProductRules.productName"><el-input placeholder="请输入产品名称" v-model="item.productName"></el-input></el-form-item></div></div></div><!-- 对接人 --><div class="pickPeople"><el-form-item label="对接人" label-width="95px"></el-form-item><div class="people_wrapper" v-for="(items, indexs) in ruleForm.financialProduct[index].dockingPerson" :key="indexs"><div><el-form-item label="对接人":prop="`financialProduct.${index}.dockingPerson.${indexs}.dockingName`":rules="dockingPerson.dockingName"><el-input placeholder="请输入联系人姓名" v-model="items.dockingName"></el-input></el-form-item></div></div><el-button type="primary" style="margin-left: 10px;" @click="addPickPeople(index)">添加对接人</el-button></div><!-- 政策 --><div class="rebatePolicy"><el-form-item label="政策"></el-form-item><div class="rebate_box" v-for="(homes, indexHomes) in item.financialPolicy" :key="indexHomes"><div><el-form-item label="政策":prop="`financialProduct.${index}.financialPolicy.${indexHomes}.makeWay`":rules="dockingPerson.makeWay"><el-input placeholder="政策" v-model="homes.makeWay"></el-input></el-form-item></div><div><el-form-item label=""><el-button type="primary" @click="delateRebatePolicy(item.financialPolicy, indexHomes)" v-if="editStatus !== 3">删除</el-button></el-form-item></div></div><el-button type="primary" style="margin-left: 10px;" @click="addRebatePolicy(index)" v-if="editStatus !== 3">添加政策</el-button></div></div><!-- 添加产品 --><el-button type="primary" style="margin: 20px 0px 30px 32px;" @click="addProduct()" v-if="editStatus !== 3">添加产品</el-button><div class="btn_submit" v-if="editStatus !== 3"><el-form-item><el-button type="primary" @click="onSubmit(ruleForm)">确认保存</el-button><el-button @click="closeLayers">取消</el-button></el-form-item></div></el-form></div></div>
</template>
<script>
export default {data() {return {ruleForm: {companyName: '', // 公司名称financialProduct: [// 产品数组{productName: '', // 产品名称dockingPerson: [// 对接人{dockingName: '', // 联系人}],financialPolicy: [// 返利政策{makeWay: '', // 计提条件}]}]},rules: {companyName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],},financialProductRules: {productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]},dockingPerson: {dockingName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],makeWay: [{ required: true, message: '请输入计提条件', trigger: 'blur' }]}};},methods: {onSubmit(formName) {this.$refs['ruleForm'].validate(valid => {if (valid) {console.log(this.ruleForm, '提交的表单');} else {return false;}});},},
};
</script>
<style scoped lang="scss"></style>

element-ui中的多层表单循环验证处理相关推荐

修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...

element-ui中的多层表单循环验证处理

element-ui中的多层表单循环验证处理相关推荐

最新文章

热门文章