el-form 多层级表单的实现示例


Posted in Javascript onSeptember 10, 2020

前言

本篇文章基于 vue、element-ui

需求

前端开发过程中,经常遇到表单开发的需求,element-ui 为我们带来了极大的便利,前端只需要更专注于前端逻辑。

我们往往会遇到相对复杂的表单,比如下面的表单:

el-form 多层级表单的实现示例

我们设计的时候可以把它设计成 3 级表单,即划分表单到每一个校验项(输入框,下拉框的等)

最终实现效果如下图所示:

el-form 多层级表单的实现示例

实现

el-form 使用,详情可参见: Form 表单

有几个比较重要的属性:

  • ref 相当于标签的 id
  • model 表单数据对象
  • rules 表单验证规则
  • prop 表单域 model 字段
  • label 标签文本

在提交按钮的时候,执行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' }]" style="width:150px;margin-right:20px;">
   <el-input v-model="second_form.packet_name" />
  </el-form-item>
  </el-form>
 </el-card>
 </el-form-item>
</el-form>

2.el-form-item 子项校验

校验比较简单,只需要获取到每一个表单对象,并执行validate即可,二级表单就遍历拿到二级表单独享执行同样的操作

定义 form 数据模型:

form: {
 name: '',
 seconde_form: [
 {
  packet_name: '',
 },
 ],
},

封装一个 check_form 方法

/**
 * 表单校验方法
 * @param {String} form_name
 */
function $check_form(form_name) {
 const form_component = this.$refs[form_name][0] ? this.$refs[form_name][0] : this.$refs[form_name];
 return new Promise((resolve, reject) => {
 form_component.validate(valid => {
  if (valid) {
  resolve();
  } else {
  reject();
  }
 });
 });
}

点击按钮的时候执行 checkParam 方法

async checkParam(form_name) {
 try {
 await this.$check_form(form_name);
 for (let i = 0; i < this.form.seconde_form.length; i++) {
  await this.$check_form(`second_form_${i}`);
 }
 // next step do something
 } catch (e) {
 console.log(e);
 }
},

到此这篇关于el-form 多层级表单的实现示例的文章就介绍到这了,更多相关el-form 多层级表单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Js sort排序使用方法
Oct 17 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
Node.js+Express配置入门教程
May 19 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
详解React的回调渲染模式
Sep 10 #Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 #Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
vue中jsonp插件的使用方法示例
Sep 10 #Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 #Javascript
You might like
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python删除文件示例分享
2014/01/28 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
python实现转圈打印矩阵
2019/03/02 Python
详解Python装饰器
2019/03/25 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
中科软测试工程师面试题
2012/06/16 面试题
医学类导师推荐信范文
2013/11/19 职场文书
英文自我鉴定
2013/12/10 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
管理人员岗位职责
2015/02/14 职场文书
作弊检讨书范文
2015/05/06 职场文书
民事辩护词范文
2015/05/21 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL