`el-form`的入门学习

知识点

`el-form`标签的核心元素

:model用于保存表单的数据对象
:rules用于对表单数据对象的校验
ref指定表单对象名称
label-width指定label的宽度
:label-position指定label的位置
:inline指定是否同行
size指定所有组件大小

`el-form-item`标签的核心元素

label设置内容
prop指定:rules中的属性
required指定必填
:rules可以设置当前prop的校验，一般数值类型的校验可在此单独设置，要指定type:'number'，与v-model.number配合使用,注意点有提及
size指定单一组件大小

注意点

:model的数据属性和:rules的属性相对应
一个el-form-item中有多个输入框，每个输入框都需要单独嵌套在el-form-item中，此操作可以单独校验每个输入框
日期类型的数据，校验要指定type:'date'
选择框的value为数值，校验需要指定type:'number'
单选按钮和多选按钮为数值，校验需要指定type:'number'
输入框想要转换成为数值类型，可以使用v-model.number，校验需要指定type:number'
输入框想要校验邮箱格式，只需要指定type:'email'
嵌套在el-input中的el-select不能实现联动校验，若想实现联动校验，需要@change自定义调用校验
rules的简单校验有三个属性：required,message,trigger,分别为：是否必填，校验失败提示信息，校验时机
如果要自定义校验规则，需要属性validator:(rule,value,callback)=>{手动校验代码块},rule参数数据很丰富，为一个Object类型的数据，有field,type,validator,required等属性，value为:model属性的值，callback(str)为要返回的信息
单选框，多选框，日期框，选择框的校验时机都应该指定为change,符合业务场景
动态添加或删除form表单的组件，需要动态配置好label,prop,rule的数据，删除按钮需要注意代码let index = array.indexOf(item)和array.splice(index,1)
重置按钮：this.$refs['refName'].resetFields();，清空了校验，表单数据也恢复初始值
校验单个组件：this.$refs['refName'].validateField('propName');进行了单个校验
校验全部：this.$refs['refName'].validate(valid=>{});表单整体校验，一般提交按钮需要触发全部校验

效果图

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head><body><div id='app'><el-form :model='formData' label-width='80px' :rules='formRule' ref='formRef'><el-form-item label='活动名称' prop='name'><el-input v-model='formData.name' placeholder='输入活动名称'></el-input></el-form-item><el-form-item label='活动区域' prop='area'><el-select v-model='formData.area' placeholder='输入活动区域'><el-option label='地区1' :value='1'></el-option><el-option label='地区2' :value='2'></el-option></el-select></el-form-item><el-form-item label='开始时间' required><el-col :span='11'><el-form-item prop='date1'><el-date-picker v-model='formData.date1' type='date' placeholder='选择日期'></el-date-picker></el-form-item></el-col><el-col class='line' :span='2'>-</el-col><el-col :span='11'><el-form-item prop='date2'><el-time-picker v-model='formData.date2' placeholder='选择时间'></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label='活动天数' prop='dateNum' :rules="[{required:true,message:'活动天数不能为空'},{type:'number',message:'活动天数为数值型'}]"><el-input v-model.number='formData.dateNum' placeholder='输入活动天数' ><el-select v-model='formData.dateType' slot='append'><el-option label='天' value='D'></el-option><el-option label='月' value='M'></el-option></el-select></el-input></el-form-item><el-form-item label='及时配送' prop='flag'><el-switch v-model='formData.flag'></el-switch></el-form-item><el-form-item label='活动性质' prop='xingzhi'><el-checkbox-group v-model='formData.xingzhi'><el-checkbox :label='1'>线上王者开黑</el-checkbox><el-checkbox :label='2'>线下旅游</el-checkbox><el-checkbox :label='3'>线下聚餐</el-checkbox><el-checkbox :label='4'>线下KTV</el-checkbox></el-checkbox-group></el-form-item><el-form-item label='特殊资源' prop='ziyuan'><el-radio-group v-model='formData.ziyuan'><el-radio :label='1'>线上礼品赞助</el-radio><el-radio :label='2'>线下场地免费</el-radio></el-radio-group></el-form-item><el-form-item label='活动形式' prop='xingshi'><el-input type='textarea' v-model='formData.xingshi'></el-input></el-form-item><el-form-item><el-button type='primary' @click='onSubmit'>立即创建</el-button><el-button @click='resetFields("formRef")'>重置</el-button></el-form-item></el-form><el-form :inline='true' :model='formData2'><el-form-item label="审批人"><el-input v-model='formData2.name' placeholder='审批人'></el-input></el-form-item><el-form-item label='活动区域'><el-select v-model='formData2.area' placeholder='活动区域'><el-option label='区域1' :value='1'></el-option><el-option label='区域2' :value='2'></el-option></el-select></el-form-item><el-form-item><el-button type='primary' @click='onSearch'>查询</el-button></el-form-item></el-form><el-button-group><el-button @click='labelPosition="left"'>左对齐</el-button><el-button @click='labelPosition="right"'>右对齐</el-button><el-button @click='labelPosition="top"'>顶部对齐</el-button></el-button-group><el-form :label-position='labelPosition' label-width='120px'><el-form-item label='用户名'><el-input v-model='username'></el-input></el-form-item><el-form-item label='密码'><el-input v-model='password'></el-input></el-form-item></el-form><el-form status-icon :model='formData4' :rules='formRule4' label-width='80px' ref='formRef4'><el-form-item prop='pass' label='密码'><el-input v-model='formData4.pass'></el-input></el-form-item><el-form-item prop='checkPass' label='确认密码'><el-input v-model='formData4.checkPass'></el-input></el-form-item><el-form-item prop='age' label='年龄'><el-input v-model.Number='formData4.age'></el-input></el-form-item><el-form-item><el-button @click='onSubmit4'>提交</el-button><el-button @click='resetFields("formRef4")'>重置</el-button></el-form-item></el-form><el-form status-icon :model='formData5' label-width='80px' ref='formRef5'><el-form-item label="邮箱" prop='email' :rules="[{required:true,message:'请输入邮箱地址',trigger:'blur'},{type:'email',message:'请输入正确的邮箱地址',trigger:['change','blur']},]"><el-input v-model="formData5.email"></el-input></el-form-item><el-form-item v-for='(domain,index) in formData5.domains' :label='"域名"+index' :key='domain.key' :prop="'domains.'+index+'.value'":rules="{required:true,message:'域名不能为空',trigger:'blur'}"><el-input v-model="domain.value"></el-input><el-button @click='removeDomain(domain)'>删除</el-button></el-form-item><el-form-item><el-button type='primary' @click='onSubmit5'>提交</el-button><el-button @click='addDomain'>新增域名</el-button><el-button @click='resetFields("formRef5")'>重置</el-button></el-form-item></el-form></div>
</body></html><style>.el-input .el-select {width: 130px;}
</style><script>new Vue({el: '#app',data() {return {name: '',formData: {name: '',area: '',xingzhi: [],ziyuan: '',xingshi: '',date1: '',date2: '',dateNum: '',dateType: '',},formRule: {name: [{ required: true, message: '请输入活动名称', triggle: 'blur' }],area: [{ type: 'number', required: true, message: '请选择活动区域', triggle: 'change' }],date1: [{ type: 'date', required: true, message: '请输入活动日期', triggle: 'change' }],date2: [{ type: 'date', required: true, message: '请输入活动时间', triggle: 'change' }],xingzhi: [{ type: 'array', required: true, message: '请选择活动性质', triggle: 'change' }],ziyuan: [{ type: 'number', required: true, message: '请选择特殊资源', triggle: 'change' }],xingshi: [{ required: true, message: '请选择活动形式', triggle: 'blur' }],},formData2: {},username: '',password: '',labelPosition: 'right',formData4: {pass: '',checkPass: '',age: '',},formRule4: {pass: [{ required: true, validator: this.validatorPass, trigger: 'blur' }],checkPass: [{ required: true, validator: this.validatorCheckPass, trigger: 'blur' }],age: [{ required: true, validator: this.validatorAge, trigger: 'blur' }],},formData5:{email:'',domains:[{key:"domain0",value:''}]},}},methods: {removeDomain(domain){let index = this.formData5.domains.indexOf(domain)if(index!== -1){this.formData5.domains.splice(index,1)}},addDomain(){let len = this.formData5.domains.lengththis.formData5.domains.push({key:"domain"+len,value:'',})},validatorPass(rule, value, callback) {if (!value) {callback(new Error('密码不能为空'))}if (this.formData4.checkPass != null) {this.$refs['formRef4'].validateField("checkPass")}callback()},validatorCheckPass(rule, value, callback) {if (!value) {callback(new Error('确认密码不能为空'))}if (value != this.formData4.pass) {callback(new Error('密码不一致'))}callback()},validatorAge(rule, value, callback) {if (!value) {callback(new Error('年龄不能为空'))}if (!Number.isInteger(value)) {callback(new Error('必须为整数型'))}if (value < 18) {callback(new Error('年龄未达标'))}callback()},onSubmit() {this.$refs['formRef'].validate(valid => {if (valid) {console.log(this.formData)}})},onSubmit4() {this.$refs['formRef4'].validate(valid => {if (valid) {console.log('success4')}})},onSubmit5(){this.$refs['formRef5'].validate(valid => {if(valid){console.log("success5")}})},resetFields(formRef) {this.$refs[formRef].resetFields();},onSearch() {console.log(this.formData2)},}})
</script>

官网地址

el-form官网地址

el-form的入门学习相关推荐

SpringBoot入门学习（五）之旅游网站项目
目录 1.项目需求 2.技术需求 3.pom.xml 4.application.yml 4.MybatisPlus的配置文件 5.springboot中配置日期类型转换器 6.用户管理 7.线路管理 ...
四、Web服务器——Session Cookie JSP入门学习笔记
今日内容 1. 会话技术1. Cookie2. Session 2. JSP:入门学习会话技术 1. 会话:一次会话中包含多次请求和响应.* 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直 ...
java day40【会话技术：Cookie 、会话技术：Session 、JSP：入门学习】
第一章会话技术 1. 会话:一次会话中包含多次请求和响应. * 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 2. 功能:在一次会话的范围内的多次请求间,共享数据 3. ...
CSS入门学习笔记+案例(1)
CSS入门学习一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
java推送叮叮消息,叮叮叮！请及时签收入门学习Java导航路线
原标题:叮叮叮!请及时签收入门学习Java导航路线引言想必有很多像我一样刚学习Java会有很迷茫的人吧,今天给小伙伴们整理了一些资料,有需要的小伙伴们可以私信我,顺便推荐一个免费学习的Qqun,里 ...
C#入门学习笔记（基于刘铁锰老师C#入门2014教学视频）【1】
C#入门学习笔记(基于刘铁锰老师C#入门2014教学视频)[1] 前言: 本笔记作为记录我从零开始学习C#的记录,为了unity的兴趣爱好自学一门C#,也算是寒假为自己充个电,希望这个寒假可以坚持下去 ...
C#入门学习笔记（基于刘铁锰老师C#入门2014教学视频）【2】
C#入门学习笔记(基于刘铁锰老师C#入门2014教学视频)[2] 初识类和名称空间前言: 本笔记作为记录我从零开始学习C#的记录,为了unity的兴趣爱好自学一门C#,也算是寒假为自己充个电,希望这 ...
SSH框架相关准备与入门学习
最近开始学习java web开发,记录一下学习的过程. 主要分为三个步骤: 1.基础:java.Mysql入门学习. 2.中级:html.css.javascipt.servlet.jsp入门学习,推 ...
elementUi基础入门学习
elementUi基础入门学习 1.前后端分离(理解) 1.1什么是前后端分离 1.2 前后端分离开发的理解 1.3 为什么要进行前端分离开发: 2 . 先去搭建前端服务 3 elementui 4 ...
Vue SSR 渲染 Nuxt3 入门学习
Vue SSR 渲染 Nuxt3 入门学习 SPA应用:也就是单页应用,这些多是在客户端的应用,不利于进行SEO优化(搜索引擎优化). SSR应用:在服务端进行渲染,渲染完成后返回给客户端,每个页面有 ...

el-form的入门学习

`el-form`的入门学习

知识点

`el-form`标签的核心元素

`el-form-item`标签的核心元素

注意点

效果图

代码

官网地址

el-form的入门学习相关推荐

最新文章

热门文章

el-form的入门学习

el-form的入门学习

知识点

el-form标签的核心元素

el-form-item标签的核心元素

注意点

效果图

代码

官网地址

el-form的入门学习相关推荐

最新文章

热门文章

`el-form`的入门学习

`el-form`标签的核心元素

`el-form-item`标签的核心元素