vue：elementui中el-form之多层数组的表单校验

已于 2023-04-18 09:35:35 修改
阅读量2.7k 收藏 4
点赞数 1
文章标签： javascript html vue.js
于 2023-04-17 16:03:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kjhytfh/article/details/130195675
版权

vue：elementui中el-form之多层数组的表单校验

文章目录

前言

内容主要是记录一下自己在开发过程中遇到的一些问题，普通的表单校验elementUI官方文档已经很详细了，但针对复杂的数据结构，就需要拓展，以下及供参考。。。

一、页面展示（实现功能最终展示效果）

在这里插入图片描述

二、数据结构：

      formData: {
        forms: [{
          uniques: [],
          form_name:'',
          prices:[{
              course_type: null,
              money: 0,
              content: '',
              written_no_pass_refund_money: 0,
              interview_no_pass_refund_money: 0,
              written_pass_pay_money: 0,
              interview_pass_pay_money: 0,
              interview_day_num: 0,
              party_a_id: '',
              party_a_name: '',
              contract_id: '',
              contract_name: '',
              interview_course_days: 0,
            }]
          }]
          }

三、html部分展示：

        <el-card class="box-card" shadow="never">
          <div slot="header">
            <b>第四步: 表单设置</b>
          </div>
          <el-form :model="formData" label-width="auto" ref="ValidateForm" label-position="left" size="medium">
            <el-card class="item" v-for="(formIt,i) in formData.forms" :key="i" style="width:100%;display: flex;margin-bottom: 20px;">
              <el-row>
                <el-col :span="7">
                  <el-form-item :label="formIt.uniques.length > 1 ? '绑定组合班级':'绑定班级'" :prop="'forms.' + i + '.uniques'" :rules="rules.uniques">
                    <el-select @change="selectClasses" class="widthSet" multiple v-model="formIt.uniques" filterable placeholder="请选择课程类型" no-data-text="请完善班级信息后再试" style="width:14vw;margin-left: 5px;">
                      <el-option v-for="item in formData.classes.filter(x=>x.class_name)" :key="item.uuid" :label="item.class_name" :value="item.uuid"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item :label="formIt.uniques.length > 1 ? '组合班级名称':'班级名称'" :prop="'forms.' + i + '.form_name'" :rules="rules.form_name">
                    <el-input v-model="formIt.form_name" type="text" style="width:14vw;margin-left: 5px;" placeholder="请输入班名"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <p>合同与价格</p>
              <el-card v-for="(it, index) in formIt.prices" :key="index" style="width:100%;display: flex;margin-bottom: 20px;border: 1px dashed #ccc;" shadow="never">
                <div class="leftCon">
                  <div class="bos_z" style="display:flex;">
                    <el-form-item label="课程班型(笔试/面试)" :prop="'forms.'+ i +'.prices.' + index + '.course_type'" :rules="rules.course_type">
                      <el-select class="widthSet" v-model="it.course_type" filterable placeholder="请选择课程类型" style="width:14vw;margin-left: 5px;" @change="courseTypeChane($event, index,i)">
                        <el-option v-for="item in typeList" :key="item.course_type" :label="item.course_type_name" :value="item.course_type"/>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="bos_z" style="display:flex;">
                    <el-form-item :label="moneyLabel(it)" :prop="'forms.'+ i +'.prices.' + index + '.money'" :rules="rules.money">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" v-model="it.money" :min="0" style="width:14vw;margin-left: 5px;"/>
                    </el-form-item>

                    <el-form-item class="widthSet" label="价格描述" :prop="'forms.'+ i +'.prices.' + index + '.content'" :rules="rules.content">
                      <el-input class="widthSet" v-model="it.content" type="textarea" :rows="1" placeholder="举例:先交5800,上岸补交20000" style="width:14vw;margin-left: 5px;"/>
                    </el-form-item>
                  </div>
                  <div class="bos_z" style="display:flex;">

                    <el-form-item label="笔试未通过退款(元)" :prop="'forms.'+ i +'.prices.' + index + '.written_no_pass_refund_money'" :rules="rules.written_no_pass_refund_money" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.written_no_pass_refund_money"/>
                    </el-form-item>

                    <el-form-item label="笔试通过补交(元)" :prop="'forms.'+ i +'.prices.' + index + '.written_pass_pay_money'" :rules="rules.written_pass_pay_money" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.written_pass_pay_money"/>
                    </el-form-item>
                  </div>
                  <div class="bos_z" style="display:flex;">
                    <el-form-item label="面试未通过退款(元)" :prop="'forms.'+ i +'.prices.' + index + '.interview_no_pass_refund_money'" :rules="rules.interview_no_pass_refund_money" v-if="it.course_type === 3 || it.course_type === 6 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.interview_no_pass_refund_money"/>
                    </el-form-item>

                    <el-form-item label="面试通过补交(元)"
                                  :prop="'forms.'+ i +'.prices.' + index + '.interview_pass_pay_money'" :rules="rules.interview_pass_pay_money" v-if="it.course_type === 3 || it.course_type === 6 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.interview_pass_pay_money"/>
                    </el-form-item>
                  </div>
                  <el-form-item label="面试天数(天)" :prop="'forms.'+ i +'.prices.' + index + '.interview_day_num'" :rules="rules.interview_day_num" v-if="it.course_type === 8 || it.course_type === 9 || it.course_type === 3 || it.course_type === 6 || it.course_type === 4 || it.course_type === 7">
                    <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.interview_day_num"/>
                  </el-form-item>

                  <div class="bos_z" style="display:flex;">
                    <el-form-item label="甲方" :prop="'forms.'+ i +'.prices.' + index + '.party_a_id'" :rules="rules.party_a_id" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 3 || it.course_type === 6 || it.course_type === 7 || it.course_type === 4 || it.course_type === 10 || it.course_type === 11">
                      <el-select class="widthSet" v-model="it.party_a_id" clearable filterable placeholder="请选择甲方" style="width:14vw;margin-left: 5px;" @change="selectPartA($event, index,i)">
                        <el-option v-for="v in courseOptions" :key="v.branch_id" :label="v.branch_name" :value="v.branch_id"/>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="合同" :prop="'forms.'+ i +'.prices.' + index + '.contract_id'" :rules="rules.contract_id" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 3 || it.course_type === 6 || it.course_type === 7 || it.course_type === 4 || it.course_type === 10 || it.course_type === 11">
                      <el-select class="widthSet" v-model="it.contract_id" clearable filterable placeholder="请选择合同" style="width:14vw;margin-left: 5px;" @change="selectContract($event, index,i)">
                        <el-option v-for="agree in it.agreementList" :key="agree.stencil_id" :label="agree.stencil_name" :value="agree.stencil_id"/>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="rightCon">
                  <el-button @click="addCourse(i)" v-if="index === formData.forms[i].prices.length - 1" style="margin: auto 10px" type="success" plain>继续添加合同与价格
                  </el-button>
                  <el-button @click="delCourse(i,index)" v-if="formData.forms[i].prices.length > 1" style="margin: auto 10px" type="danger" plain>删除当前合同与价格
                  </el-button>
                </div>
              </el-card>


              <div class="rightCon">
                <el-button @click="addCombinedClass" v-if="i === formData.forms.length - 1"
                           style="margin: auto 10px" type="success" plain>继续添加表单
                </el-button>
                <el-button @click="delCombinedClass(i)" v-if="formData.forms.length > 1"
                           style="margin: auto 10px" type="danger" plain>删除当前表单
                </el-button>
              </div>
            </el-card>

          </el-form>
        </el-card>

总结

重点在于:prop中拼接
在这里插入图片描述

你眼里有光呀
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
html表单多层跨行怎么写,el-form 多层级表单的实现示例
weixin_39542477的博客
06-29 682
前言本篇文章基于 vue、element-ui需求前端开发过程中，经常遇到表单开发的需求，element-ui 为我们带来了极大的便利，前端只需要更专注于前端逻辑。我们往往会遇到相对复杂的表单，比如下面的表单:我们设计的时候可以把它设计成 3 级表单，即划分表单到每一个校验项(输入框，下拉框的等)最终实现效果如下图所示:实现el-form 使用，详情可参见： Form 表单有几个比较重要的属性：r...
element 表单校验rules
最新发布
weixin_73250108的博客
06-13 413
规则示例
el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
02-12 5088
prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）
Element表单校验数组类型数据
你的阿迁
07-24 776
2. el-form 与 el-item绑定相关属性。1. 定义数据 以及校验rules。
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
element-ui中表单多选一验证
sky___Show的博客
05-17 231
【代码】element-ui中表单多选一验证。
Vue之功能全面的表格（六）实现带有数组输入的表单
慎独
08-04 2431
文章目录输入表单添加作者删除作者小结 输入表单 1、编辑DataTable.vue，在对话框中加入表单，包含除添加作者以外的所有输入框 <!-- 对话框 --> <edit-dialog :show="editShow" title="编辑学习计划" @close="closeEditDialog" @save="saveTodo"> <!-- 学习内容表单 --> <el-form :model="currentTodo"
【elementUI】Element-ui 之 form表单套数组、表单数组套数组的校验rule
小墨鱼的前端问题录
07-01 820
element form 表单多层级rules校验
vue elementUI 表单校验功能之数组多层嵌套
12-08
本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要进行校验时，直接在父级`el-form`中通过`prop`属性绑定规则可能无法达到预期效果。这是因为`el...
vue-form-json:通过数组验证生成Vue表单
04-29
vue-form-json 验证生成Vue表单 所有字段都是必填字段，默认情况下输入文本。 提交后，将在$ root上发出带有formName和所有值的事件“ formSubmitted”。 特征 从数组生成表单（formFields属性） 默认情况下，布尔玛类（可以覆盖） React灵敏 倍数列上的字段const formFields = [ [ { label : 'label one' } , { label : 'label two' } ] ] 预填值const formFields = [ { label : 'the label' , value : 'the value' } ] const formFields = [ { label : 'the label' , rules : { is_not : 'label' } } ] 跨字段验证（请参阅CodeSa
vue-formbuilder:ElementUI 表单生成器
05-30
vue-formbuilder2.0 基本代码是从克隆的，并做了一些改进。 项目设置 npm install 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build 运行你的测试 npm run test Lints 和修复文件 npm run ...
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
记一下vue element-ui form表单绑定数组遇到的坑
liux6687的博客
04-08 4420
先上一下效果图 其中商品可以一次性添加多个, 起初看到这个需求想的是循环创建多个el-form表单的, 但是写的时候发现如果循环多个表单就会有很多个ref, 表单效验就没法写。 我的解决方案是使用computed, 将一个数组拼成一个表单对象 computed: { formData: function() { const formData = {}; this.formDataArr.map((item, index) .
element ui动态渲染表单（数组）并验证
zzzz121380的博客
05-16 2976
element ui动态渲染表单（数组）并验证 1、需求： 点击编辑按钮，弹出编辑框（表单），从后端拿到字段后动态渲染到页面上，并校验必填 2、代码实现 其中：specialColumns是从后端拿到的json数组,格式如下： [ { columnName: "操作" columnType: "enumeration" columnValue: "再次上报,废弃" controlId: "FormProperty_08tc63f"
rules表单校验常用属性
weixin_55333190的博客
09-04 1603
表单校验规则 第三方校验规则参见 async-validator 点击跳转 几个基本使用的规则 规则 说明 required 如果为true，表示该字段为必填 message 当不满足设置的规则时的提示信息 pattern 正则表达式，通过正则验证值 min 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值 max 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值 trigger 校验的触发方式，change
Element组件表格内表单验证
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
05-19 1683
验证起作用规则： 关键在于 1、:prop="'table的data字段名.' + scope.$index + '.input字段名'" 2、v-model="scope.row.input字段名" 例如： <el-form-item :prop="`tableData[${scope.$index}].SubjectBook.C_Name`" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]
element-plus表单验证使用 个人总结
热门推荐
ymzhao
10-18 4万+
表单验证能通过设置验证规则验证用户的输入，并对不规范的输入做出对应提示。element-plus（包括element-ui）都提供了表单验证功能。但官网上只有最基本的使用方法，详细使用需要参考async-validator，element-plus表单验证就是通过它实现的..............................
vue+elementui的el-form+axios的api接口怎么配合使用
04-21
可以先在el-form的submit方法中使用axios发送请求，具体的方法如下： 在template中： ``` <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> ``` 在script中： ``` import axios from 'axios'; export default { data() { return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { axios.post('/api/login', this.form).then(response => { if (response.data.code === 200) { // 登录成功，跳转到首页 this.$router.push('/home'); } else { this.$message.error('登录失败'); } }); } else { return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; ``` 在上述代码中，我们先引入了axios，使用axios发送POST请求到后台的/api/login接口，参数为表单中的form数据。如果接口返回的状态码为200，说明登录成功，此时可以跳转到首页。如果接口返回的状态码不为200，说明登录失败，此时可以给用户提示登录失败信息。 至此，vue和element-ui的form组件与axios的api接口就配合使用成功了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值