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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
jQuery实现视频展示效果
May 30 jQuery
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
详解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
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
javascript操作css属性
2013/12/30 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
浅谈js的异步执行
2016/10/18 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
Koa 中的错误处理解析
2019/04/09 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python 实现屏幕录制示例
2019/12/23 Python
python学生管理系统的实现
2020/04/05 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
EJB timer的种类
2014/10/28 面试题
2014年打非治违工作总结
2014/11/13 职场文书
职代会闭幕词
2015/01/28 职场文书
会计岗位职责范本
2015/04/02 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Python进程间的通信之语法学习
2022/04/11 Python