封面来源：本文封面来源于 Element UI 官网，如有侵权，请联系删除。

参考视频：适合后端编程人员的 ElementUI教程,结合SpringBoot项目案例,已完结!!!

1. Element UI 的引言

The world’s most popular Vue UI framework

Element UI 是一个 Vue UI 框架，因此在学习的时候需要有一定的 Vue 基础（包括 Vue 脚手架），相关文章可在本站搜索【Vue2.0 快速入门】一文进行阅读。

Element UI 官网：Element UI

Element UI 国内官网站点：Element UI zh

根据官网得知：Element UI 是一个 网站快速成型工具，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的 桌面端组件库。

现在 Element UI 已经支持 Vue 3.0 了，但 在本文我们依旧使用 Vue 2.0 与 Element UI 进行讲解。

本文 只做 常用组件与 思路的讲解，详细内容可以参考官方文档。

对 Element UI 下一个定义：Element UI 就是一个基于 Vue 的 UI 框架，它基于 Vue 开发了很多相关组件，方便我们快速开发页面。

Element UI 的由来

Element UI 是 饿了么前端团队 基于 Vue 进行开发并开源的框架，Element UI 中提供的全部都是封装好的组件。

2. 快速开始

2.1 基本安装

安装方式

在 官方文档 中，提供了两种安装方式，一种是基于 Vue 脚手架的，一种是基于 CDN 加速的：

NPM：

1npm i element-ui -S

CDN：

1234<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

在如今的环境下，我们的项目都是前后端分离的，因此不再选用 CDN 的方式进行安装，选择 NPM 的方式进行安装。

安装步骤

那么我们就需要先通过 Vue 脚手架创建一个名为 element 的项目：

1vue init webpack element

等待项目创建完毕后，前往项目根目录执行以下命令，来启动一下创建的项目：

1npm start

如果可以启动成功，证明我们的创建没有问题。

然后在项目的根目录中执行以下命令，安装 Element UI：

1npm i element-ui -S

等待安装完毕后，指定当前项目中使用 Element UI。前往项目的 src 目录下，找到 main.js 文件，在这个文件中添加以下代码：

12345import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 在 Vue 脚手架中使用 Element UI
Vue.use(ElementUI);

到此，Element UI 就安装成功了！

2.2 第一个 Demo

初探按钮组件：

12345678910111213141516171819202122232425262728293031323334353637383940414243444546<template>
  <div>
    <!-- 使用默认按钮组件 -->
    <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-row>
    <br>

    <!-- 使用简洁按钮 -->
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <br>

    <!-- 使用圆角按钮 -->
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <br>

    <!-- 使用图标按钮 -->
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
  </div>
</template>

3. 基本组件的使用

总结： 日后使用 Element UI 的相关组件时，所有组件都是通过 el-组件名称 进行使用！

3.1 Button 按钮

创建按钮

1<el-button>默认按钮</el-button>

按钮属性的使用

1234<el-button type="primary" size="mini" :plain="true" round>primary</el-button>
<el-button type="success" size="small" :plain="true" round>success</el-button>
<el-button type="warning" size="medium" :plain="true" round>warning</el-button>
<el-button type="danger " size="medium" icon="el-icon-delete" circle></el-button>

总结： 在 Element UI 中组件属性的使用都是直接按照 属性名=属性值 的方式写在对应的组件标签上！

在 Element UI 中：

1、如果一个属性的类型是 boolean 且默认值是 false，那么可以直接在标签上使用这个属性，而不指定值，这时候的值是 true。

2、如果一个属性的类型是 boolean，且默认值是 true，如果想要指定它的值为 false，那么需要使用 Vue 的绑定语法，即： :属性名="false"。

按钮有很多属性，具体参考 Button Attributes

按钮组与图标按钮

1234<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>

3.2 Link 文字链接

创建文字链接

1<el-link href="https://mofan212.github.io" target="_blank">默认链接</el-link>

文字链接属性的使用

12345<el-link type="primary" :underline="false">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info" icon="el-icon-platform-eleme">信息链接</el-link>

Link 文字链接的属性，具体参考 Link Attributes

3.3 Layout (栅格)布局

在官网的 Layout 布局 上有这样一句话：通过基础的 24 分栏，迅速简便地创建布局。

就是说： 在 Element UI 中的布局组件将页面划分为多个行 row，每行最多分为 24 栏（列）。

使用 Layout 组件

1234567891011121314151617181920212223242526272829303132<template>
<div>
    <h1>Layout布局组件的使用</h1>
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <br>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    </div>
</template>

<style>
  .bg-purple-dark {
    background: #99a9bf;
  }
   .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
</style>

注意：

1、在一个布局组件中，是由 row 和 col 组合而成的。

2、在使用时需要区分 row 的属性和 col 的属性。

行属性的使用

123456<el-row :gutter="50" tag="span">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

基本上常用的也就 gutter 和 tag 两个属性，其他属性可参考：Row Attributes

列属性的使用

1234567891011121314<h1>Layout组件中使用偏移</h1>
<el-row>
    <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<br>
<el-row>
    <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="12" :offset="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<br>
<el-row>
    <el-col :span="12" :offset="6" :push="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

注意 span 和 offset 属性的区别！

其他属性可参考：Col Attributes

3.4 Container 布局容器

官网的说明

官网链接：Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

注意： 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

容器的基本使用

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<template>
  <div>
    <h1>布局容器的使用</h1>
    <!-- 创建容器 -->
    <el-container>
      <!-- header -->
      <el-header><div><span>我是标题</span></div></el-header>
      <!-- 容器的嵌套使用 -->
      <el-container>
        <!-- aside -->
        <el-aside><div><span>我是菜单</span></div></el-aside>
        <!-- main -->
        <el-main><div><span>我是中心内容</span></div></el-main>
      </el-container>
      <el-footer><div><span>我是页脚</span></div></el-footer>
    </el-container>
  </div>
</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

水平容器与垂直容器

<el-container> 有只有一个属性：

123456789101112<!-- 创建容器 -->
<el-container direction="horizontal">
    <!-- header -->
    <el-header><div><span>我是标题</span></div></el-header>
    <el-container direction="vertical">
        <!-- aside -->
        <el-aside><div><span>我是菜单</span></div></el-aside>
        <!-- main -->
        <el-main><div><span>我是中心内容</span></div></el-main>
    </el-container>
    <el-footer><div><span>我是页脚</span></div></el-footer>
</el-container>

容器其他属性的使用

Header Attributes：

Aside Attributes：

Footer Attributes：

代码示例：

12345678910111213<h1>容器其他属性的使用</h1>
<!-- 创建容器 -->
<el-container>
    <!-- header -->
    <el-header height="80px"><div><h1>我是标题</h1></div></el-header>
    <el-container>
        <!-- aside -->
        <el-aside width="200px"><div><h1>我是菜单</h1></div></el-aside>
        <!-- main -->
        <el-main><div><h1>我是中心内容</h1></div></el-main>
    </el-container>
    <el-footer height="100px"><div><h1>我是页脚</h1></div></el-footer>
</el-container>

4. 表单组件的使用

4.1 Radio 单选按钮

创建 Radio 单选按钮

123456789101112131415161718<template>
  <div>
    <h1>Radio的使用</h1>
    <el-radio v-model="label" label="男">男</el-radio>
    <el-radio v-model="label" label="女">女</el-radio>
  </div>
</template>

<script>
export default {
  name: 'Radio',
  data() {
    return {
      label: '男'
    }
  }
}
</script>

要使用 Radio 组件，只需要设置 v-model 绑定变量，选中意味着变量的值为相应 Radio label 属性的值，label 可以是 String、Number 或 Boolean。

注意： 在使用 Radio 单选按钮的时候，至少要加入 v-model 和 label 两个属性。

Radio 按钮属性的使用

123456789101112131415<h1>Radio按钮属性的使用</h1>
<el-radio v-model="radio" label="1" name="radio" size="mini" border>备选项1</el-radio>
<el-radio v-model="radio" label="2" name="radio" size="small" disabled border>备选项2</el-radio>
<el-radio v-model="radio" label="3" name="radio" size="mudium" border>备选项3</el-radio>

<script>
export default {
  name: 'Radio',
  data() {
    return {
      radio: '1'
    }
  }
}
</script>

name 属性就是原生的 name 属性，用于向后端传递值时使用。

size 属性表示 Radio 的尺寸，仅在 border 属性为 true 时有效，其值只有三种可选。

属性的使用还是按照 属性名=属性值 的方式直接卸载对应的组件标签上。

Radio 属性具体的使用参考：Radio Attributes

Radio 事件的使用

12345678910111213141516171819<h1>Radio绑定事件的使用</h1>
<el-radio v-model="event" label="1" @change="changeValue">选项1</el-radio>
<el-radio v-model="event" label="2" @change="changeValue">选项2</el-radio>

<script>
export default {
  name: 'Radio',
  data() {
    return {
      event: '1'
    }
  },
  methods: {
    changeValue() {
      alert("事件触发 ==>" + this.event);
    }
  }
}
</script>

总结：

1、事件的使用也是和属性的使用是一样的，都是直接写在对应的组件标签上。

2、事件在使用时必须使用 Vue 中绑定事件的方式进行使用，如：@事件名=事件处理函数（绑定在 Vue 组件中对应函数）

Radio 按钮组

1234567891011121314151617<h1>单选按钮组</h1>
<el-radio-group v-model="radio" >
    <el-radio label="3" border>备选项3</el-radio>
    <el-radio label="6" border>备选项6</el-radio>
    <el-radio label="9" border>备选项9</el-radio>
</el-radio-group>

<script>
export default {
  name: 'Radio',
  data() {
    return {
      radio: '3',
    }
  },
}
</script>

使用 Radio 按钮组，只需要绑定一次数据，而无需每次都绑定。

按钮组也有自己的属性，具体可以查看：Radio-group Attributes

同样，按钮组也有自己的事件，和单个 Radio 类似，就不在此赘述了，可以参考：Radio-group Events

只需要把 el-radio 元素换成 el-radio-button 元素就可以实现按钮样式的单选组合。其属性可以参考：Radio-button Attributes

4.2 Checkbox 多选框

多选框的基本使用

1234567891011121314151617181920<template>
  <div>
    <h1>Checkbox组件的使用</h1>
    <el-checkbox v-model="checked" true-label="北京">北京</el-checkbox>
    <el-checkbox v-model="checked" true-label="上海">上海</el-checkbox>
    <el-checkbox v-model="checked" true-label="广州">广州</el-checkbox>
    <el-checkbox border checked true-label="杭州">杭州</el-checkbox>
  </div>
</template>

<script>
export default {
  name: 'Checkbox',
  data() {
    return{
      checked: "北京"
    }
  }
};
</script>

与 Radio 单选按钮一样，Checkbox 也有自己的属性，两者都差不多，具体可以参考：Checkbox Attributes

同样的，Checkbox 也有属于自己的事件，其事件也是当绑定值变化时触发的事件，事件名称为 change，其回调参数是更新后的值。

多选框组的使用

上述案例中，Checkbox 似乎与单选按钮一样，根本无法实现多选，那是因为要使用多选框组才能实现多选。

多选框组适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

checkbox-group 元素能把多个 Checkbox 管理为一组，只需要在 Group 中使用 v-model 绑定 Array 类型的变量即可。 el-checkbox 的 label 属性是该 Checkbox 对应的值，若该标签中无内容，则该属性也充当 Checkbox 按钮后的介绍。label 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

123456789101112131415161718<el-checkbox-group v-model="checkList" min="1">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>

<script>
export default {
  name: 'Checkbox',
  data() {
    return{
      checkList: ['选中且禁用','复选框 A']
    }
  }
};
</script>

多选框组也有自己的属性，可以指定被勾选的 Checkbox 的最大 / 小数量，具体可以参考：Checkbox-group Attributes

多选框组也有属于自己的事件，和单个 Checkbox 一样，其事件也是当绑定值变化时触发的事件，事件名称为 change，其回调参数是更新后的值。

除此之外，还有 Checkbox-Button 可以使用，就和 Radio-Button 一样，具体可以参考：按钮样式 和 Checkbox-button Attributes

4.3 Input 输入框

注意：

1、Input 为受控组件，它 总会显示 Vue 绑定值。

2、通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用 v-model）。否则，输入框内显示的值将不会改变。

3、Input 不支持 v-model 修饰符。

创建 Input 输入框

123456789101112131415161718<template>
  <div>
    <h1>Input组件的使用</h1>
    <el-input placeholder="请输入内容" v-model="name"></el-input>

  </div>
</template>

<script>
export default {
  name: 'Input',
  data() {
    return {
      name: 'mofan'
    }
  }
}
</script>

Input 的常用属性

Input 的属性有很多，完整属性列表可参考 Input Attributes，常用属性如下表所示：

注意： 要想 Input 输入框能够键入值，<el-Input> 必须有 v-model 属性！

Input 事件的使用

根据 Element UI 的官网，Input 输入框有以下事件：

对于 change 事件来说，当我们在输入框内输入一次数据后，当输入框失去焦点或按下回车就会触发该事件。如果输入框内的数据没有发生改变，那么就算输入框再失去焦点或者再按下回车都 不出 触发该该事件，直到输入框内的数据发生改变。

12345678910111213141516171819202122232425262728<h1>Input事件的使用</h1>
<el-input v-model="username" @blur="aaa" @focus="bbb"></el-input>
<br>
<br>
<el-input v-model="change" @input="ccc" placeholder="input事件的使用"></el-input>

<script>
export default {
  name: 'Input',
  data() {
    return {
      username: '',
      change: '',
    }
  },
  methods: {
    aaa() {
      console.log("失去焦点");
    },
    bbb() {
      console.log("获得焦点");
    },
    ccc(value) {
      console.log("输入框内的值: " + value);
    }
  }
}
</script>

注意： 当我们使用组件的事件并指定触发事件后执行的方法时，在组件上只需要书写方法名即可，不要书写括号或者参数。比如下面这种书写方式是错误的：

1<el-input v-model="change" @input="ccc()" placeholder="input事件的使用"></el-input>

下面这种也是错误的：

1<el-input v-model="change" @input="ccc(value)" placeholder="input事件的使用"></el-input>

Input 方法的使用

跟着官方文档继续走，会发现 Input 组件还有名为 Input Methods 的东西，那这是啥？

需要明白的是， 在 Element UI 中所有组件都存在属性、事件和方法：

• (Attributes)属性 是用来定义组件初始的状态。直接写在对应的组件标签上，按照 属性名=属性值 的方式进行使用
• (Events)事件 是在组件发生某种状态变化时，触发组件特定的事件。直接使用 Vue 绑定事件方式写在对应组件标签上，按照 @事件名=Vue中事件处理函数名 的方式进行使用
• (Methods)方法 是用来改变组件的默认状态。使用时需要先在对应组件标签上使用 ref=组件别名 ，然后通过 this.$refs.组件别名.方法名() 的方式进行调用

对于 Input 输入框来说，官方提供了一下几种方法：

123456789101112131415161718192021222324252627<h1>Input方法的使用</h1>
<el-input v-model="method" ref="input"></el-input>
<br>
<br>
<el-button @click="focusInputs">focus</el-button>
<el-button @click="blurInputs">blur</el-button>

<script>
export default {
  name: 'Input',
  data() {
    return {
      method: ''
    }
  },
  methods: {
      // 调用focus方法
    focusInputs() {
      this.$refs.input.focus();
    },
      // 调用blur方法
    blurInputs() {
      this.$refs.input.blur();
    }
  }
}
</script>

总结：

1、当我们使用组件的方法时，需要在对应的组件上加入 ref=组件别名，这样就会将当前组件绑定给 Vue 实例

2、在调用组件方法（Methods）时，可以直接使用 this.$refs.组件别名.组件方法名(); 的形式调用组件方法。

4.4 Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

创建 Select 选择器

1234567891011121314151617181920212223242526272829303132333435363738<template>
  <div>
    <h1>Select选择器的使用</h1>
    <!-- 数据写死在页面上 -->
    <el-select v-model="language" placeholder="请选择语言">
      <el-option value="Java">Java</el-option>
      <el-option value="C">C</el-option>
      <el-option value="C++">C++</el-option>
    </el-select>
    <!-- 动态地获取数据 -->
    <el-select v-model="dept" placeholder="请选择部门">
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "Select",
  data() {
    return {
      options: [
        { id: "1", name: "研发" },
        { id: "2", name: "中台" },
        { id: "3", name: "财务" },
        { id: "4", name: "人事" },
      ],
      dept: '',
      language: '',
    };
  },
};
</script>

注意： 在下拉列表中，<el-option> 必须存在 value 属性值；在 <el-select> 必须存在 v-model 属性以进行数据绑定。

如果我们需要从数据库中获取数据，那么只需要在 Vue 生命周期的 created 中通过 Axios 获取数据即可。后续会有案例讲解，别慌。 😎

Select 的常用属性

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

Input 的属性有很多，完整属性列表可参考 Select Attributes，常用属性如下表所示：

Select 事件的使用

对于 Select 选择器来说，Element UI 提供了以下几种事件：

123456789101112131415161718192021222324252627282930<el-select v-model="dept" multiple placeholder="请选择部门" @change="aaa">
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id"
      ></el-option>
</el-select>

<script>
export default {
  name: "Select",
  data() {
    return {
      options: [
        { id: "1", name: "研发" },
        { id: "2", name: "中台" },
        { id: "3", name: "财务" },
        { id: "4", name: "人事" },
      ],
      dept: '',
    };
  },
  methods: {
    aaa(value) {
      console.log(value);
    }
  }
};
</script>

Select 方法的使用

Select 选择器也有自己的方法，它有以下两个方法：

4.5 Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

创建 Switch 开关

在学习该组件时，需要创建一个名为 Switch.vue 的文件，但是这个时候浏览器可能会产生警告，虽然不影响使用，可看着也不舒服。这是因为定义的组件名和 Element UI 中的组件名一致了，只需要将组件名改为 Switchs.vue 即可。

12345678910111213141516171819202122232425<template>
  <div>
    <h1>Switch开关的使用</h1>
    <el-switch
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="打开"
      :active-value="true"
      inactive-text="关闭"
      :inactive-value="false">
    </el-switch>
  </div>
</template>

<script>
export default {
  name: 'Switchs',
  data() {
    return {
      value: true
    }
  }
}
</script>

Switch 的所有属性

Switch 的事件和方法

事件：

方法：

123456789<h1>Switch事件与方法</h1>
        <el-switch
        v-model="aaa"
        @change="bb"
        active-value="on"
        inactive-value="off"
        ref="sw">	
        </el-switch>
<el-button @click="cc">调用方法</el-button>

4.6 DatePicker 日期选择器

用于选择或输入日期。

在 Element UI 中，提供了三种与时间日期相关的选择器，分别是：TimePicker（时间选择器）、DatePicker（日期选择器）和 DateTimePicker（日期时间选择器）。我们常用的是日期选择器，因此在此就介绍一些日期选择器。

创建 DatePicker 日期选择器

12345678910111213141516171819<template>
  <div>
    <h1>DatePicker日期选择器的使用</h1>
    <el-date-picker
    v-model="createTime">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'DatePicker',
  data() {
    return {
      createTime:''
    }
  }
}
</script>

DatePicker 的属性

DatePicker 的属性有很多，完整属性列表可参考 DatePicker Attributes，常用属性如下表所示：

注意： 当我们使用 <el-date-picker> 组件时，尽量指定 value-format 属性，同时，对应属性在数据库的字段类型设置成 timestamp，否则可能会造成添加的时间日期与真正存储的时间日期不一致。

readonly 和 disabled 最大的区别在于设置前者时，数据 会随着表单的提交而提交；而设置后者时，数据并 不会随着表单的提交而提交。

12345678910111213141516171819202122232425<template>
  <div>
    <h1>DatePicker日期选择器的使用</h1>
    <el-date-picker
    v-model="createTime"
    :editable="false"
    :clearable="false"
    type="daterange"
    start-placeholder="请输入开始时间"
    end-placeholder="请输入结束时间"
    format="yyyy/MM/dd">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'DatePicker',
  data() {
    return {
      createTime:''
    }
  }
}
</script>

Picker Options 和 Shortcuts

Picker Options：用来对日期控件做自定义配置

Shortcuts：用来增加日期组件的快捷面板

12345678910111213141516171819202122232425262728293031323334353637383940414243<h1>日期配置</h1>
<el-date-picker
v-model="createTime"
type="date"
placeholder="请输入时间"
:picker-options="pickerOptions">
</el-date-picker>

<script>
export default {
  name: 'DatePicker',
  data() {
    return {
      createTime:'',
      pickerOptions: {
          disabledDate(time) { // 对选择的日期进行配置
            return time.getTime() > Date.now(); // 只能选择今天及以前
          },
          shortcuts: [{ // 定义的shortcuts
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
    }
  }
}
</script>

DatePicker 的事件

1234567891011121314151617181920<el-date-picker
v-model="createTime"
@change="aaa">
</el-date-picker>

<script>
export default {
  name: 'DatePicker',
  data() {
    return {
      createTime:'',
    }
  },
  methods: {
    aaa(value) {
      console.log(value);
    }
  }
}
</script>

4.7 Upload 上传

通过点击或者拖拽上传文件。

对应官方文档：Upload 上传

创建 Upload 上传

12345678910111213141516171819202122<template>
  <div>
    <h1>Upload组件的使用</h1>
    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "Uploads",
  data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
};
</script>

注意： 在使用 <el-upload> 组件时，必须设置 action 属性，action 属性为必要参数且不能省略。

如果想实现拖拽上传，可以：

12345678910<h1>Upload拖拽上传</h1>
<el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

Upload 的所有属性

注意：

1、在使用 on-exceed 属性时，要结合 limit 属性使用。

2、在使用钩子时，需要使用 v-bind: 或者 : 进行绑定。

3、在使用 <el-upload> 组件时，没有 event 事件，所有事件都是属性事件。

Upload 的方法

12345678910111213141516<el-upload ref="uploads" ......>
    ......
</el-upload>
<el-button @click="clearFiles">清空文件</el-button>

<script>
export default {
  name: "Uploads",
    // ...
  methods: {
    clearFiles() {
      this.$refs.uploads.clearFiles();
    }
  }
};
</script>

4.8 Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

对应官方文档：Form 表单

创建 Form 表单

根据官方文档的案例，经典的表单包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586<template>
  <div>
    <h1>Form组件的使用</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker
            placeholder="选择时间"
            v-model="form.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Forms",
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style>
</style>

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker 等组件。

如果想要创建内联表单，那么只需要将 <el-form> 的 inline 属性设置为 true 即可。如：

123<el-form ref="form" :inline="true" :model="form" label-width="80px">
    ......
</el-form>

Form 的属性

表单的验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

表单验证包括两种情况：一是失去焦点就进行验证，另一种是表单提交调用表单组件的验证方法验证。

12345678910111213141516171819202122232425262728293031323334353637383940<el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
</el-form>

<script>
export default {
  name: "Forms",
  data() {
    return {
      form: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
  },
};
</script>

自定义验证规则

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990<h1>自定义验证规则</h1>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

自定义校验 callback 必须被调用。

5. 消息提示组件的使用

在 Element UI 中，消息提示组件的使用比较简单，建议参考官网文档进行编写。

5.1 Alert 警告

用于页面中展示重要的提示信息。

对应官方文档：Alert 警告

Alert 警告的使用

12345678910111213141516171819202122232425262728<template>
  <div>
    <h1>Alert组件的使用</h1>
    <el-alert title="成功提示信息" type="success" description="我是辅助信息1号" :closable="false"></el-alert>
    <br>
    <el-alert title="消息提示信息" type="info" close-text="知道了" show-icon>
      <div slot>我是辅助信息2号</div>
    </el-alert>
    <br>
    <el-alert title="警告提示信息" type="warning" effect="dark" @close="hello" center></el-alert>
    <br>
    <el-alert title="错误提示信息" type="error" effect="light" show-icon center></el-alert>
  </div>
</template>

<script>
export default {
  name: 'Alerts',
   methods: {
      hello() {
        alert('Hello World!');
      }
    }
}
</script>

<style>
</style>

5.2 Message 消息提示

常用于主动操作后的反馈提示。

对应官方文档：Message 消息提示

与 Notification 的区别是后者更多用于系统级通知的被动提醒。

但在这我们并不介绍 Notification，可以自行查看官方文档：Notification 通知

Message 消息提示的使用

注意： 这个组件的创建无须在页面中书写任何标签，它是一个 JS 插件，在需要展示消息提示的位置直接调用提供的 JS 插件即可。

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<template>
  <div>
    <h1>Message组件的使用</h1>
    <el-button type="success" @click="open2">成功</el-button>
    <el-button type="warning" :plain="true" @click="open3">警告</el-button>
    <el-button type="primary" :plain="true" @click="open1">消息</el-button>
    <el-button type="danger" @click="open4">错误</el-button>
    <el-button :plain="true" ref="close" @click="closeMsg">调用关闭提示方法</el-button>
  </div>
</template>

<script>
export default {
  name: "Messages",
  methods: {
    open1() {
      this.$message("这是一条消息提示")
    },
    open2() {
      const h = this.$createElement;
      this.$message({
        message: h("p", null, [
          h("span", null, "内容可以是 "),
          h("i", { style: "color: teal" }, "Success"),
        ]),
        type: "success",
        duration: 0,
      });
    },
    open3() {
      this.$message({
        showClose: "true",
        message: "警告哦，这是一条警告消息",
        type: "warning",
        center: "true",
      });
    },
    open4() {
      this.$message.error("错了哦，这是一条错误消息");
    },
    closeMsg() { // 关闭所有消息提示
      this.$message.closeAll();
    }
  },
};
</script>

<style>
</style>

Element UI 注册了一个 $message 方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置 type 字段可以定义不同的状态，默认为 info。此时正文内容以 message 的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入 type 字段的情况下像 open4 那样直接调用。

默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用 showClose 字段。此外，和 Notification 一样，Message 拥有可控的 duration，设置 0 为不会被自动关闭，默认为 3000 毫秒。

其他属性：

Message 的完整属性参考：Options

将 dangerouslyUseHTMLString 属性设置为 true，message 就会被当作 HTML 片段处理。参考：Message 使用 HTML 片段

注意： message 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要 将用户提交的内容赋值给 message 属性。 简单来说，最好别用这玩意。 😓

6. Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

Table 表格组件是作为 Data 数据组件的一项，数据组件中还有很多其他的组件，比如分页、树形控件等。表格组件在日常开发中会经常使用到，因此单独提出来进行讲解。

6.1 创建 Table 表格

创建一个表格需要使用到 <el-table> 组件。当 el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。可以使用 width 属性来定义列宽。

12345678910111213141516171819202122232425<template>
  <div>
    <h1>Table组件的使用</h1>
    <el-table :data="tableData">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Tables',
  data() {
    return {
      tableData: [
        {id: 1, name: "mofan", age: 18, email: "cy.mofan@qq.com"},
        {id: 2, name: "默烦", age: 20, email: "cy.mofan@qq.com"},
      ]
    }
  }
}
</script>

6.2 表格的列属性

表格的完整列属性参看：Table-column Attributes

对于 fixed 属性可以理解为自适应，当其设置为 left 时，还会取决于 width 属性值，但是设置为 right 时，不会取决于 width 属性值。

align 可以设置列中内容的对齐方式，包括表头和表内数据。如果只想设置表内数据的对齐方式，可以使用 header-align 设置表头的对齐方式。

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485<template>
  <div>
    <h1>Table组件的使用</h1>
    <el-table :data="tableData" border>
      <el-table-column
        prop="id"
        :resizable="false"
        header-align="left"
        align="center"
        label="编号"
        width="200px"
      ></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        :sort-method="sorts"
        sortable
      ></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column
        prop="dept.name"
        :formatter="showDept"
        label="部门"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Tables",
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "mofan",
          age: 18,
          email: "cy.mofan@qq.com",
          dept: {
            id: 1,
            name: "研发",
          },
        },
        {
          id: 2,
          name: "默烦",
          age: 20,
          email: "cy.mofan@qq.com",
          dept: {
            id: 2,
            name: "财务",
          },
        },
        {
          id: 3,
          name: "小陈",
          age: 22,
          email: "cy.mofan@qq.com",
          dept: {},
        },
      ],
    };
  },
  methods: {
    sorts(a, b) {
      console.log(a);
      console.log(b);
      return b.age - a.age; // 注意交换顺序后的区别
    },
    showDept(row, column, cellValue, index) {
      console.log(row);
      console.log(column);
      console.log(cellValue);
      console.log(index);
      if (cellValue) {
        return cellValue;
      } else {
        return "暂无部门";
      }
    },
  },
};
</script>

6.3 表格的属性

表格的完整属性参看：Table Attributes

使用 row-class-name 可以指定每一行的回调方法，也可以直接指定固定的 className。比如，可以给每一行指定不同的样式（设置不同的底色），但是在设置不同的底色时 最好移除 属性 stripe，使用这个属性很有可能会让我们设置的样式无法显示。

在使用 empty-text 属性时，空数据时显示的文本内容，指的是 整个表没有数据 时显示的文本内容。

本次的案例建立在 6.2 表格的列属性 demo 的基础上：

1234567891011121314151617181920212223242526272829303132333435363738394041<el-table
      :data="tableData"
      border
      :fit="false"
      :height="400"
      size="small"
      :highlight-current-row="true"
      :row-class-name="showCss"
      :show-header="false">
</el-table>

<script>
export default {
  name: "Tables",
  data() {
    return {
     // 省略已写代码
    };
  },
  methods: {
      // 省略以写代码
    showCss({row, rowIndex}) {
      if(rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>