关于element的表单组件整理笔记

element表单及代码的展示

详细可以看element表单官方网址

结构、功能分析

通过介绍以及源码可以发现，表单是具有收集、校验、提交数据三个功能的。

他的基本结构如下：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
 <el-form-item label="账号" prop="name">
 <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
</el-form>

通用组件的特点就是：高内聚、低耦合，根据这个特点，我们所要写的组件就应该是一个模块负责一个功能（功能单一、提高复用性），同时减少他们之间交互带来的不良影响。

分析上面源码的基本结构：

form： :model 与 :rules 分别是用于接受数据模型与校验规则、使用ref属性进行了注册，方便后续操作DOM

item： 通过prop得到当前数据的值

input： 双向绑定管理数据

那么就可以得知他们分别负责的功能是收集、校验、提交数据

那么下面就用我们最常见的登录注册功能来从小往大开始写一遍代码

input组件实现

首先明确目标：input组件只需要实现双向绑定，起到管理数据的功能即可

双向绑定的实现需要用到v-model，在以往学习过程中，v-model语法糖其实是可以拆分成v-bing:value、v-on:input两个，在绑定数据的时候同时监听事件。

下面粘贴一些代码截图，方便下面记录：

父组件：

子组件：

首先明确Input需要实现的功能:通过双向绑定维护数据

那么只需要搞懂双向绑定的值与监听的事件分别是什么就行。

为了方便管理数据，input子组件里绑定的值应该是父组件传进来的值

值得注意的是：在子组件的input事件里，一般是一个单向数据流，那么当数据发生变化的时候，只需要派生一个事件给父组件，再通过监听父组件传进来的值，从而实现改变数据，实现一个父传子、子传父的单向循环

item组件的实现

父组件：

子组件：

item子组件需要完成的功能为：校验

我们先写一个模板，校验功能等到后面再完善

form组件的实现

父组件：

子组件：

form实现的功能：接收数据和校验规则

所以需要声明这两个属性方便接收

基本的框架都完成了，下面就是核心问题

核心问题

①在form里接受的数据和规则，但是需要用的地方却是在item里，那么我们怎么把值传下去呢 => provide和inject

虽然目前我们要用到的值只有imformation和rules，但是为了方便，我们传的值是this,这样以后就可以通过this，在子代拿到父代以及更高级的实例.

在form组件里加入provide

其他需要用的数据的组件里加入inject

使用例子：

②通知校验、进行校验

在input组件里派发一个事件给自己的父级item，通知它校验

在item里接收这个事件并实现

在validate方法里，首先我们要获取到校验的规则和需要被校验的值，那么我们之前通过provide和inject已经把值传下来了，现在通过在item里加一个prop，这样就可以通过prop定位拿到我们想要的值

接下来我们安装一个第三方库 npm i async-validator -S(可以执行很多异步的校验规则)

async-validator使用

然后在item里引入使用


到这里其实基本就算完成了，为了更好的使用，一般是有一个提交按钮，点击后再进行全局校验的

提交功能

父组件：

form子组件：

到这里就算是完成了，感谢大家的观看，本人只是个小菜鸡，如果大家发现有什么地方不对的，请立马提出你宝贵的意见纠正我，谢谢

总结

到此这篇关于关于element表单组件的文章就介绍到这了,更多相关element表单组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ElementUI多个子组件表单的校验管理实现

    ElementUI多个子组件表单的校验管理实现

    背景 公司项目中所用到的前端框架是Vue.js + ElementUI,因为项目的业务场景中有很多的大表单,但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好.最初的项目为了方便,常常把多个表单写在一个.vue组件中,这导致单文件的代码量巨大,逻辑十分复杂.目前为了维护方便,表单的拆分就变得十分重要. 现在做了以下的Demo说明我们的业务场景,父组件是App.vue,该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件(在实际的业务场景中,可能多达10

  • vue使用Element组件时v-for循环里的表单项验证方法

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

  • Vue element-ui父组件控制子组件的表单校验操作

    方法一: 父组件代码: <template> <div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保 存</el-button> </div> </template> <

  • 关于element的表单组件整理笔记

    关于element的表单组件整理笔记

    element表单及代码的展示 详细可以看element表单官方网址 结构.功能分析 通过介绍以及源码可以发现,表单是具有收集.校验.提交数据三个功能的. 他的基本结构如下: <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="账号" prop="name"> <el-in

  • vue封装form表单组件拒绝重复写form表单

    vue封装form表单组件拒绝重复写form表单

    目录 前言 核心思想: 实现重点: 表单双向绑定的方式有两种: 1.使用v-model进行双向绑定 2.使用v-model的语法糖 配置项 整体字段: 效果浏览 源码放送 1. baseForm组件 2. 父组件 3. 配置项 4. 添加或编辑 前言 在日常工作中,当需要处理的form表单很多时,我们没有必要一遍又一遍地重复写form表单,直接封装一个组件去处理就好.其实很早之前就有涉猎通过使用类似配置json方法写form表单的文章,虽然当时也没怎么认真看...我们前端组也是使用这种思想配置的

  • jQuery Mobile框架中的表单组件基础使用教程

    jQuery Mobile框架中的表单组件基础使用教程

    一.表单组件基础 1.组件简介 jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用.需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便. jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会

  • YII2.0之Activeform表单组件用法实例

    本文实例讲述了YII2.0之Activeform表单组件用法.分享给大家供大家参考,具体如下: Activeform 文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dropDownList(); 隐藏域:hiddenInput(); 文本域:textarea(['rows'=>3]); 文件上传:fileInput(); 提交按钮:submitBu

  • 为JQuery EasyUI 表单组件增加焦点切换功能的方法

    为JQuery EasyUI 表单组件增加焦点切换功能的方法

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabindex 属性,而真实的元素被隐藏了.本文通过一个自定义函数,实现Tab 和 回车键的焦点切换功能. 2.函数定义 通过捕获窗口按件,对回车和Tab键进行了热点切换处理.先根据当前焦点,获取需要tabindex 属性,加1后为下一焦点无素的属性

  • Bootstrap表单组件教程详解

    Bootstrap表单组件教程详解

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss bootstrap仅对表单内的fieldset.legend.label标签进行了定制 fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0; m

  • 微信小程序form表单组件示例代码

    微信小程序form表单组件示例代码

    表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. 属性名 类型 说明 report-submit Boolean 是否返回fo

  • 解决layui的使用以及针对select、radio等表单组件不显示的问题

    layui是国内一款界面比较整洁大方的ui框架,里面封装了很多前端开发常用的组件,通常我们直接复制代码过去就可以实现效果,可以提高我们的开发效率. 使用步骤: 1.下载layui:https://www.layui.com 2.将layui文件夹复制到自己的项目里: 3.在html页面引入相关的css和js: <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"

  • 微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn

  • 微信小程序常用表单组件的使用详解

    微信小程序常用表单组件的使用详解

    目录 1.常用表单组件 1.1button 1.2checkbox 1.3input 1.4label 1.5form 1.6radio 1.7slider 1.8switch 1.9textarea 2.实训小案例–问卷调查 1.常用表单组件 1.1 button <button>为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交.其属性表如下所示. 代码示例: <view class="demo-box"> <view class=&quo

随机推荐