Layout布局
ElementUI将一行分为24栏,通过<el-row>和<el-col>组件的span属性可以自由的组合布局
当el-col没有内容时,占位
<el-row>
<el-col :span="23" class="solid-fransparent"><el-col>
<el-col :span="1">{{'你好'}}<el-col>
</el-row>
<style>
.solid-fransparent{
border:1px solid transparent;
}
</style>
使用icon图标
直接通过设置类名为 el-icon-iconName 来使用即可
单独使用时
<i class="el-icon-user"></i>
或者
<span class="el-icon-user"></span>
在组件上使用时
//button上面使用
<el-button icon="el-icon-search"></el-button>
//input使用 prefix-icon 首部增加图标 suffix-icon 尾部增加图标
<el-input type="text" prefix-icon="el-icon-user"></el-input>
el-form组件的使用
在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
(1)如果列比较少,设置 inline 属性可以让表单域变为行内的表单域,一行显示所有的<el-form-item>列,行宽度不够时自动换行
<el-form :inline="true">
<el-form-item>
<el-input v-model="username"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
(2)通过设置 label-position 属性可以改变表单域标签的位置,可选值为 top、left,right,当设为 top 时标签会置于表单域的顶部
label-width 设置label的长度,使用 label-position属性时,需要给<el-form-item >设置lable属性
<el-form class="login-from" label-position="top" label-width="80px">
<el-form-item label='用户名'>
<el-input v-model="username"></el-input>
</el-form-item>
</el-form>
(3)Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可
关于rules中的详细介绍,本人的另一篇文章:传送地址
<el-form :rules="rules" :model="form" ref="formRules">
<el-form-item prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
data(){
return{
form:{
name:'',
password:'',
},
rules:{
name:[
{required: true, message: '请输入用户名',trigger:'blur'},
{min:6,max:16,pattern:/^[1-9a-zA-Z]+$/,message:'长度为6-16位的数字,字母',trigger:'blur'},
]
}
}
},
值得注意的是el-form如果不写:model时,只会验证是否为空,不会验证长度,其中冒号是v-bind的缩写,表示将data中的form数据绑定到model上,然后通过prop属性获取进行验证
:model的值与v-model前面的值一致,prop的值要与v-model的后面的值一致,即::model='form' ,prop='name' v-model='from.name'。
使用status-icon属性为输入框添加了表示校验结果的反馈图标。
<el-form :rules="rules" :model="form" ref="formRules" status-icon>
<el-form-item prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
除了在全部表单上添加验证规则外,还可以给单个的表单域上传递属性的验证规则
<el-form :model="form" ref="formRules" status-icon>
<el-form-item prop="name" :rules="[{require:true,message:'请输入密码',trigger:'blur'}]>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
提交form表单 this.$refs.formRules.validate()方法 formRules是el-form中ref属性值
login(){
//获取验证的结果
this.$refs.formRules.validate((valid)=>{
if(valid){
alert("验证通过!");
}else{
return false;
}
});
}
button的使用
(1)button使用type、plain、round和circle属性来定义 Button 的样式,type定义按钮的类型,plain是否朴素按钮 ,round是否圆角按钮,circle定义是否圆形按钮
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="text">文字按钮</el-button>
</el-row>
(2)button 使用disabled属性来定义按钮是否可用,它接受一个Boolean值。
(3)button设置icon属性设置图标按钮,如何使用第三方icon可以参考:https://blog.csdn.net/changwen17/article/details/129037882
(4)button使用<el-button-group>标签来嵌套你的按钮。
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
(5)设置为 loading 状态,只要设置loading属性为true,将按钮设置为加载中
<el-button type="primary" :loading="true">加载中</el-button>