前言
本篇文章基于 vue、element-ui
需求
前端开发过程中,经常遇到表单开发的需求,element-ui 为我们带来了极大的便利,前端只需要更专注于前端逻辑。
我们往往会遇到相对复杂的表单,比如下面的表单:
我们设计的时候可以把它设计成 3 级表单,即划分表单到每一个校验项(输入框,下拉框的等)
最终实现效果如下图所示:
实现
el-form 使用,详情可参见: Form 表单
有几个比较重要的属性:
在提交按钮的时候,执行validate方法即可;实时校验可在rules中设置校验项 trigger: 'change'即可
1.el-form 设计
划分表单到每一个校验项(输入框,下拉框的等),可以设计成 3 级表单
奖励设置 这一个校验项稍微复杂一点,可以动态绑定 model 和 rules 实现子项的表单校验
<!-- 一级表单 --> <el-form class="form" ref="form" :model="form" :rules="form_rules" size="small"> <el-form-item label="红包活动标题" prop="name"> <el-input v-model='form.name' placeholder="请输入红包活动标题(活动展示)" /> </el-form-item> <el-form-item :label="`奖励设置(${form.seconde_form.length}/${max_reward_module_num})`" prop="seconde_form"> <el-card class="reward_module" v-for="(second_form, second_form_index) in form.seconde_form" :key="`${second_form_index}_second_form`"> <!-- 二级表单 --> <el-form class="second_form" :ref="`second_form_${second_form_index}`" :model="second_form" :disabled="is_form_item_disabled" inline size="small"> <el-form-item prop="packet_name" :key="`${second_form_index}_packet_name`" :rules="[{ required: true, message: '请输入奖励名称', trigger: 'change' }]" > <el-input v-model="second_form.packet_name" /> </el-form-item> </el-form> </el-card> </el-form-item> </el-form>
文章题目:el-form多层级表单的实现示例-创新互联
标题URL:https://www.cdcxhl.com/article34/dpoppe.html
成都网站建设公司_创新互联,为您提供用户体验、App开发、品牌网站设计、网站制作、外贸网站建设、移动网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联