在VUE中使用ElementUI的常用组件

1. 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>

2. 使用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>

3. 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;
                }
            });
        }

4. 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>