vue中ElementUI表单是怎样的(elementui,vue,开发技术)

ElementUI表单

el的表单官网内容很多，看了一眼觉得心累了。但实际上它使用起来非常的方便,el为我们封装了各种组件，样式也大众。

一个简单的案例

代码如下（使用时确保引入了相关的组件）

<template><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="用户名"><!--form-item用于显示关联的文件--><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="密码"><el-inputtype="password"v-model="form.pwd"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">登录</el-button><el-button>取消</el-button></el-form-item></el-form></template><script>exportdefault{data(){return{form:{name:'',pwd:''}}},methods:{onSubmit(){console.log('submit!');}}}</script>

看起来还是挺多行是吗?去掉些必要标签还有些声明，剩下的是：el-form,el-input,el-form-item三个组件。el-form是必要的,对布局有影响，el-form-item是做为关联表单元素的文字，el-input便是我们的输入框了。布局已经预设，用这三个便可以是最基本的表单了。是否方便？

表单的主要组件

常用的表单组件，输入框，下拉框，单选框，多选框，文本域，对应的组件是：Form,FormItem,Input,Select,Option,Checkbox,Radio。

还有一些同样是实用组件，开关(Switch)、日期选择器(DatePicker),时间选择器(TimePicker)单选框组(RadioGroup),多选框组(CheckboxGroup)等

表单组件的使用

不管哪一种组件都一样，先main.js中引入模块，然后在页面中即可使用：

//main.jsimport{Form,FormItem,Input,CheckboxGroup,Radio,RadioGroup,Switch}from'element-ui';Vue.use(Form)Vue.use(RadioGroup)Vue.use(Radio)Vue.use(FormItem)Vue.use(Input)//...需要哪些引入哪些

假设在form.vue中使用,代码多了看了烦，我只写一个下拉框、开关、文本域。(这叫抛砖引玉,xixi)

<template><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="活动区域"><!--记得使用v-model来绑定表单字段--><el-selectv-model="form.region"placeholder="请选择活动区域"><el-optionlabel="区域一"value="shanghai"></el-option><el-optionlabel="区域二"value="beijing"></el-option></el-select></el-form-item><el-form-itemlabel="即时配送"><!--记得使用v-model来绑定表单字段--><el-switchv-model="form.delivery"></el-switch></el-form-item><el-form-itemlabel="活动形式"><!--记得使用v-model来绑定表单字段--><el-inputtype="textarea"v-model="form.desc"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></template><script>exportdefault{data(){return{form:{region:'',//区域delivery:false,//是否及时配送desc:''//活动形式描述}}},methods:{onSubmit(){console.log('submit!');}}}</script>

效果如下

行内的表单

不难发现我们的组件都是再一个组件站一行，如果要使组件变为行内元素也肥肠简单。给el-form组件添加:inline="true"的属性即可（属性前加冒号才会认值为true是一个布尔，否将认为是字符串）

<el-form:inline="true"><!--//如此即可--></el-form>

对齐方式

**这里的对齐指的是label的文本对齐方式。**同样是加载el-form组件的label-position属性中

label-position的可用值：left,right,top(top为label在上，组件再下的显示，不在同一行)。如下

<el-formlabel-position="left"><!--//如此即可--></el-form>

表单验证

表单验证的关键点有三：

1.el-form组件中添加:rules="规则组对象"属性添加，值为验证规则的对象

2.表单组件添加prop属性为组件指定验证规则。prop属性加在el-form-item上

3.定义验证规则的对象

验证一般用于输入框

如下代码：

<template><el-formref="form":rules="rules":model="form"label-width="180px"><el-form-itemlabel="活动名称，长度限制"prop="name"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="url，类型限制"prop="u"><el-inputv-model="form.url"></el-input></el-form-item></el-form></template><script>exportdefault{data(){return{form:{name:'',url:'',},rules:{name:[{required:true,message:'请输入活动名称',trigger:'blur'},{min:3,max:5,message:'长度在3到5个字符',trigger:'blur'}],u:[{type:'url',required:true,message:'必须为规范的url地址',trigger:'change'}]},}},}}</script>

重点提一下，如过要验证数字类型，那么。需要把v-model换成v-model.number!!! 切记 ！！！

<el-form-itemlabel="url，类型限制"prop="u"><!--加上.number修饰符才会把输入值转为数字类型--><el-inputv-model.number="form.num"></el-input></el-form-item>

自定义的验证规则

自定义验证与预定义验证的不同在于一点(考考你，共有哪三个关键点)：

自定义规则对象的编写形式

<script>exportdefault{data(){letcheckNum=(rules,val,callback)=>{rules//这里会得到定义的校验对象的属性if(!Number.isInteger(val)){//如果要提示错误信息，那么通过第三个参数回调出去，参数值为Error实例callback(newError('请输入数值'))}}return{//校验规则rules:{ u:[{type:'url',required:true,message:'必须为规范的url地址',trigger:'change'},//添加一条自定义的验证，值为函数名{validator:checkNum,targger:'change'} ], },}}}</script>

表单内组件尺寸控制

通过给el-form添加size属性，来指定表单元素的尺寸。很简单，如下

size的可用值：medium / small / mini

<el-formsize="miniz"></el-form>

总结form模块的属性

属性属性值说明modelobject表单数据对象rulesobject验证规则inlineBoolean默认false是否设置为行内元素label-positionright/left/top默认right表单域标签对齐方式label-widthstring例如150px标签标签(label)的宽度sizemedium / small / mini表单组件尺寸status-iconboolean默认false是否显示校验结果的icondisabledboolean默认false作用域为整个表单。不用多解释了

form模块的方法

Form Methods（官方文档的，了解一下）

方法名说明参数validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promiseFunction(callback: Function(boolean, object))validateField对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: string))resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果—clearValidate移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果Function(props: array | string)

如何使用这些方法？

<template> <el-formref="f"></el-form></template><script>//重置表单constfrom=this.$refs.f.resetFields()</script>

form-item模块的属性

参数参数值说明propstring传入model的字段。在使用 validate、resetFields 方法的情况下，该属性是必填的labelstringtag textlabel-widthstring例如150px。标签占用的框度requiredboolean是否必填rulesobject表单校验规则sizemedium / small / mini组件尺寸show-messageboolean默认true是否显示校验错误信息inline-messageboolean默认false以行内形式展示校验信息

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">