1引用方式：

1）npm i element-ui -S

2）<!-- 引入樣式 -->

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

2配合vue專案

在 main.js 中寫入以下內容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
 
3元件說明

1，柵格佈局

• :span="24"長度
• :span='6' 佔格數
• :gutter="20" 列間距
• :offset="6" 柵格左側的間隔格數
• type="flex" justify="center' align='center'啟用flex佈局
• ：push =‘6’ 柵格向右移動格數
• ：pull=‘8’ 柵格向左移動格數

<el-row :gutter="20">

<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>

<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>

</el-row>

2圖示庫

直接通過設定類名為el-icon-iconName來使用即可。例如：<i class="el-icon-edit"></i>

3單選框

只需要設定v-model繫結變數radio，選中的就是相應單選框的label的值。可設定預設選中的值

disabled 禁用

border 帶邊框

<template>

<el-radio v-model="radio" label="1">備選項</el-radio>

<el-radio v-model="radio" label="2">備選項</el-radio>

</template>

組合互斥：

<el-radio-group v-model="radio" @ change=‘返回選中的label值’>

<el-radio :label="3">備選項</el-radio>

<el-radio :label="6">備選項</el-radio>

<el-radio :label="9">備選項</el-radio>

</el-radio-group>

4多選框

在el-checkbox元素中定義v-model繫結變數，單一的checkbox中，預設繫結變數的值會是Boolean，選中為true。

disabled 禁用

<template>

<!-- `checked` 為 true 或 false -->

<el-checkbox v-model="checked">備選項</el-checkbox>

</template>

組合+全選：

在 Group 中使用v-model繫結Array型別的變數即可。el-checkbox的label屬性是該 checkbox 對應的值，

indeterminate屬性用以表示 checkbox 的不確定狀態，一般用於實現全選的效果

:min="1" :max="2" 限制選中個數

checkAll控制全選

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="返回選中的label值">全選</el-checkbox>

<el-checkbox-group v-model="checkList" @change="返回選中的label值">

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

4 input

clearable 帶清空按鈕 @clear=‘fun'

show-password 密碼框

prefix-icon和suffix-icon屬性在 input 元件首部和尾部增加顯示圖示，也可以通過 slot 來放置圖示。

size="medium"large、small 和 mini 三種尺寸

maxlength和minlength是原生屬性，用來限制輸入框的字元長度

<el-input placeholder="請輸入內容" v-model="input" clearable> </el-input>

組合：input+搜尋列表

5 計數器

:disabled="true" 禁用

:step="2" 步數

:precision="2" 控制小數位數

step-strictly屬性接受一個Boolean。如果這個屬性被設定為true，則只能輸入步數的倍數。

<el-input-number v-model="num" @change="返回數值" :min="1" :max="10" label="描述文字"></el-input-number>

6 時間選擇器

@change=‘返回選擇的時間’

:picker-options="{selectableRange: '18:30:00 - 20:30:00'} 任意時間

:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"時間段

<el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="選擇時間"> </el-time-select>

組合：

1 固定時間段（結束時間大於開始時間minTime: startTime）

<el-time-select placeholder="起始時間" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"> </el-time-select>

<el-time-select placeholder="結束時間" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select>

2任意時間（結束時間大於開始時間）

<el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="開始時間" end-placeholder="結束時間" placeholder="選擇時間範圍"> </el-time-picker>

value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],

7 日期選擇器

@change=‘返回選中時間或時間段’

value-format="yyyy-MM-dd" 獲取到的時間格式（預設為date物件）timestamp時間戳format="yyyy 年 MM 月 dd 日" 日曆上顯示的格式

:picker-options="pickerOptions" 控制 選擇的時間

pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); },

<el-date-pickerv-model="value1"type="date"placeholder="選擇日期"format="yyyy 年 MM 月 dd 日"></el-date-picker>

組合：

<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"> </el-date-picker>

:default-time="['00:00:00', '23:59:59']"在選擇日期範圍時，指定起始日期和結束日期的預設時刻。

8 無限滾動

9時間線

10摺疊面板

11對話方塊+MessageBox 彈框

12步揍條

13tab頁

14loading

15Pagination 分頁

16表格