介绍说明 占位输出 条件输出 遍历集合 宏指令 import指令 include指令
入门介绍
解决页面初始化前闪现源代码
入门介绍 内置过渡动画 Layout布局 Container 布局容器 Color 色彩 Typography 字体 Icon 图标 Button 按钮 Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框 Form 表单 Table 表格 Tag 标签 Progress 进度条 Tree 树形控件 Pagination 分页 Badge 标记 Alert 警告 Loading 加载 Message 消息提示 MessageBox 弹框 Notification 通知 NavMenu 导航菜单 Tabs 标签页 Breadcrumb 面包屑 Dropdown 下拉菜单 Steps 步骤条 Dialog 对话框 Tooltip 文字提示 Popover 弹出框 Card 卡片 Carousel 走马灯 Collapse 折叠面板
Ajax接口调用

# 介绍说明

Freemarker 是一款模板引擎，是一种基于模版生成静态文件的通用 工具，它是为Java程序员提供的一个开发包，或者说是一个类库，它不是面向最终用户的，而是为程序员提供了一款可以嵌入他们开发产品的应用程序。

Freemarker 是使用纯java编写的，为了提高页面的访问速度，需要把页面静态化， 那么Freemarker就是被用来生成html页面。

# 前提条件

本工程使用的Freemarker整合了Spring MVC， 与你需要了解或熟悉Spring MVC框架。如果你熟悉EL表达，将有助于该工程Freemarker的使用。

# 正常输出

【用法】

${r'${hello}'}

【效果】
${hello}

# 输出HTML标签

【用法】
${r"${'<a>a标签</a>'?html}"}
【效果】
${'a标签'?html}

# 输出带$表达式

【用法】
${r"${r'${hello}'}"}
【效果】
${r'${hello}'}

# if else 组合

【用法】

${'<#if status == 0>'}

status is 0

${'<#else>'}

status is not 0

${'</#if>'}

【效果】
<#if status == 0> status is 0 <#else> status is not 0

# if elseif else 组合

【用法】

${'<#if status == 0>'}

status is 0

${'<#elseif status ==1>'}

status = 1

${'<#else>'}

status != 0 && status !=1

${'</#if>'}

【效果】
<#if status ==0 > status = 0 <#elseif status ==1> status = 1 <#else> status != 0 && status !=1

# 遍历集合Foreach

【用法】

${'<#list citys as city>'}

${r'${city}'}

${'</#list>'}

【效果】
<#list citys as city> ${city}

# Foreach获得索引

【用法】

${'<#list citys as city>'}

${r' ${city_index} --> ${city}'}

${'</#list>'}

【效果】
<#list citys as city> ${city_index} --> ${city}

# 定义宏方法及用法

【定义】

${'<#macro sayHello name1 name2>'}

${r'hello, ${name1} and ${name2}'}

${r'</#macro>'}

-----------------

${r'<@sayHello name1="zhangsan" name2="lisi"/>'}

【效果】

hello, zhangsan and lisi

# nested 指令

代替调用宏指令时标签对之间包裹的内容

【定义及用法】

${r'<#macro hw>'}

${r'hello,<#nested>'}

${r'</#macro>'}

${r'<@hw>zhangsan,lisi,wangwu,zhaoliu<<@hw>'}

# 定义宏完整示意

【定义】

${'<#macro print items >'}

${r'<#nested>:'}

${r'<#list items as item>'}

${''?html}${r'${item}'?html}${''?html}

${'</#list>'}

${'</#macro>'}

【用法】

${'<@print items=["A","B","C"]>'}

items is

${'</@print>'}

【效果】
<@print items=["A","B","C"]> items is

# import指令

【用法】

${r'<#import "/control/macro.ftl"/>'}

# 引入命名空间

【用法】

${r'<#import "/control/macro.ftl" as macro/>'}

# 调用变量

【用法】

${r'${macro.fileName}'}

# 调用方法

【用法】

${r'<@macro.printEmp employee/>'}

# 修改变量

【用法】

${r'<#assign fileName = "command.ftl" in util />'}

# include 嵌入文件

【用法】

${r'<#include "/control/footer.ftl" />'}

# 介绍说明

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或 既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

# 解决办法

【CSS中添加样式】

${'
'?html}

【视图中调用】

${'

'?html}

${'...'?html}

${'

'?html}

# 设计原则

### 一致性 Consistency

- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

### 反馈 Feedback

- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

### 效率 Efficiency

- 简化流程：设计简洁直观的操作流程；
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

### 可控 Controllability

- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

# 本项目使用

CDN引入

${''?html}

${''?html}

${''?html}

${'
'?html}

项目本地引入

${''?html}

${''}

${''?html}

${'
"?html}

# 内置过渡动画

fade 淡入淡出
zoom 缩放
collapse 展开折叠
【基础布局】
【分栏间隔】
【混合布局】
【分栏偏移】
【对齐方式】
【响应式布局】

### 包含的类名及其含义为：

- `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
- `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
- `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
- `hidden-sm-and-up` - 当视口在 `sm` 及以上尺寸时隐藏
- `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
- `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
- `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
- `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏
- `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏
- `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏
- `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏

### Row Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
gutter | 栅格间隔 | number | — | 0
type | 布局模式，可选 flex，现代浏览器下有效 | string | — | —
justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start
align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top
tag | 自定义元素标签 | string | * | div

### Col Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
span | 栅格占据的列数 | number | — | 24
offset | 栅格左侧的间隔格数 | number | — | 0
push | 栅格向右移动格数 | number | — | 0
pull | 栅格向左移动格数 | number | — | 0
xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | —
sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | —
md | `≥992px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | —
lg | `≥1200px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | —
xl | `≥1920px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | —
tag | 自定义元素标签 | string | * | div

# Container 布局容器

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

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

`<el-header>`：顶栏容器。

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

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

`<el-footer>`：底栏容器。

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

【常见页面布局】
Header Main

Header Main Footer

Aside Main

Header Aside Main

Header Aside Main Footer

Aside Header Main

Aside Header Main Footer

### Container Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal

### Header Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
height | 顶栏高度 | string | — | 60px

### Aside Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
width | 侧边栏宽度 | string | — | 300px

### Footer Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
height | 底栏高度 | string | — | 60px

主色

Element 主要品牌颜色是鲜艳、友好的蓝色。

Blue
#409EFF
bg-blue

CSS 样式:bg-blue

辅助色

除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。

Success
#67C23A
Warning
#E6A23C
Danger
#F56C6C
Info
#909399

CSS 样式:bg-success，bg-warning，bg-danger，bg-info

中性色

中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。

主要文字
#303133
常规文字
#606266
次要文字
#909399
占位文字
#C0C4CC
一级边框
#DCDFE6
二级边框
#E4E7ED
三级边框
#EBEEF5
四级边框
#F2F6FC

CSS 文字颜色:.text-color-primary ，.text-color-regular，.text-color-secondary，.text-color-placeholder

CSS 边框颜色:.bg-border-base，.bg-border-light，.bg-border-lighter，.bg-border-extra-light

### Typography 字体

我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。

### 中文字体

和畅惠风
PingFang SC
和畅惠风
Hiragino Sans GB
和畅惠风
Microsoft YaHei

### 英文／数字字体

RGag
Helvetica Neue
RGag
Helvetica
RGag
Arial

### Font-family 代码

`font-family: " Helvetica Neue", Helvetica," PingFang SC"," Hiragino Sans GB"," Microsoft YaHei","微软雅黑", Arial, sans-serif;`

### 字体使用规范

主标题 | 用 Element 快速搭建页面 | 20px Extra large
标题 | 用 Element 快速搭建页面 | 18px large
小标题 | 用 Element 快速搭建页面 | 16px Medium
正文 | 用 Element 快速搭建页面 | 14px Small
正文（小） | 用 Element 快速搭建页面 | 13px Extra Small
辅助文字 | 用 Element 快速搭建页面 | 12px Extra Extra Small

## Icon 图标

提供了一套常用的图标集合。

### 使用方法

直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：

【效果】
搜索
`${'
${''?html}`

### 图标集合

- el-icon-info
- el-icon-error
- el-icon-success
- el-icon-warning
- el-icon-question
- el-icon-back
- el-icon-arrow-left
- el-icon-arrow-down
- el-icon-arrow-right
- el-icon-arrow-up
- el-icon-caret-left
- el-icon-caret-bottom
- el-icon-caret-top
- el-icon-caret-right
- el-icon-d-arrow-left
- el-icon-d-arrow-right
- el-icon-minus
- el-icon-plus
- el-icon-remove
- el-icon-circle-plus
- el-icon-remove-outline
- el-icon-circle-plus-outline
- el-icon-close
- el-icon-check
- el-icon-circle-close
- el-icon-circle-check
- el-icon-circle-close-outline
- el-icon-circle-check-outline
- el-icon-zoom-out
- el-icon-zoom-in
- el-icon-d-caret
- el-icon-sort
- el-icon-sort-down
- el-icon-sort-up
- el-icon-tickets
- el-icon-document
- el-icon-goods
- el-icon-sold-out
- el-icon-news
- el-icon-message
- el-icon-date
- el-icon-printer
- el-icon-time
- el-icon-bell
- el-icon-mobile-phone
- el-icon-service
- el-icon-view
- el-icon-menu
- el-icon-more
- el-icon-more-outline
- el-icon-star-on
- el-icon-star-off
- el-icon-location
- el-icon-location-outline
- el-icon-phone
- el-icon-phone-outline
- el-icon-picture
- el-icon-picture-outline
- el-icon-delete
- el-icon-search
- el-icon-edit
- el-icon-edit-outline
- el-icon-rank
- el-icon-refresh
- el-icon-share
- el-icon-setting
- el-icon-upload
- el-icon-upload2
- el-icon-download
- el-icon-loading

# Button 按钮

常用的操作按钮。

【基础用法】
默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮

朴素按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮

圆角按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮

# 禁用状态

按钮不可用状态。
默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮

朴素按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮

# 文字按钮

没有边框和背景色的按钮。
文字按钮 文字按钮

# 图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
搜索 上传

# 按钮组

以按钮组的方式出现，常用于多项类似操作。
上一页 下一页

# 加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。
加载中

# 不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
加载中

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
size | 尺寸 | string | medium / small / mini | —
type | 类型 | string | primary / success / warning / danger / info / text | —
plain | 是否朴素按钮 | boolean | — | false
round | 是否圆角按钮 | boolean | — | false
circle | 是否圆形按钮 | boolean | — | false
loading | 是否加载中状态 | boolean | — | false
disabled | 是否禁用状态 | boolean | — | false
icon | 图标类名 | string | — | —
autofocus | 是否默认聚焦 | boolean | — | false
native-type | 原生 type 属性 | string | button / submit / reset | button

# Radio 单选框

在一组备选项中进行单选

# 基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

# 禁用状态

单选框不可用的状态。

# 单选框组

适用于在多个互斥的选项中选择的场景

# 按钮样式

按钮样式的单选组合。

# 带有边框

### Radio Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
label | Radio 的 value | string / number / boolean | — | —
disabled | 是否禁用 | boolean | — | false
border | 是否显示边框 | boolean | — | false
size | Radio 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | —
name | 原生 name 属性 | string | — | —

### Radio Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 绑定值变化时触发的事件 | 选中的 Radio label 值

### Radio-group Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | —
disabled | 是否禁用 | boolean | — | false
text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff
fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF

### Radio-group Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 绑定值变化时触发的事件 | 选中的 Radio label 值

### Radio-button Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
label | Radio 的 value | string / number | — | —
disabled | 是否禁用 | boolean | — | false
name | 原生 name 属性 | string | — | —

# Checkbox 多选框

一组备选项中进行多选

# 基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

# 禁用状态

多选框不可用状态。

# 多选框组

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

# indeterminate 状态

`indeterminate` 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

# 可选项目数量的限制

使用`min`和 `max` 属性能够限制可以被勾选的项目的数量。

# 按钮样式

按钮样式的多选组合。
带有边框

### Checkbox Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效） | string / number / boolean | — | —
true-label | 选中时的值 | string / number | — | —
false-label | 没有选中时的值 | string / number | — | —
disabled | 是否禁用 | boolean | — | false
border | 是否显示边框 | boolean | — | false
size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | —
name | 原生 name 属性 | string | — | —
checked | 当前是否勾选 | boolean | — | false
indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false

### Checkbox Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 当绑定值变化时触发的事件 | 更新后的值

### Checkbox-group Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | —
disabled | 是否禁用 | boolean | — | false
min | 可被勾选的 checkbox 的最小数量 | number | — | —
max | 可被勾选的 checkbox 的最大数量 | number | — | —
text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff
fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #409EFF

### Checkbox-group Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 当绑定值变化时触发的事件 | 更新后的值

### Checkbox-button Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效） | string / number / boolean | — | —
true-label | 选中时的值 | string / number | — | —
false-label | 没有选中时的值 | string / number | — | —
disabled | 是否禁用 | boolean | — | false
name | 原生 name 属性 | string | — | —
checked | 当前是否勾选 | boolean | — | false

# Input 输入框

通过鼠标或键盘输入字符

#### 基础用法

remarks

#### 禁用状态

#### 可清空

remarks

#### 带 icon 的输入框

带有图标标记输入类型
属性方式：
slot 方式：

#### 文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

#### 可自适应文本高度的文本域

通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。

#### 复合型输入框

可前置或后置元素，一般为标签或按钮

#### 尺寸

#### 带输入建议

根据输入内容提供对应的输入建议
激活即列出输入建议
输入后匹配输入建议

#### 自定义模板

可自定义输入建议的显示

#### 远程搜索

从服务端搜索数据

### Input Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
type | 类型 | string | text，textarea 和其他 原生 input 的 type 值 | text
value | 绑定值 | string / number | — | —
maxlength | 原生属性，最大输入长度 | number | — | —
minlength | 原生属性，最小输入长度 | number | — | —
placeholder | 输入框占位文本 | string | — | —
clearable | 是否可清空 | boolean | — | false
disabled | 禁用 | boolean | — | false
size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | medium / small / mini | —
prefix-icon | 输入框头部图标 | string | — | —
suffix-icon | 输入框尾部图标 | string | — | —
rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2
autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false
auto-complete | 原生属性，自动补全 | string | on, off | off
name | 原生属性 | string | — | —
readonly | 原生属性，是否只读 | boolean | — | false
max | 原生属性，设置最大值 | — | — | —
min | 原生属性，设置最小值 | — | — | —
step | 原生属性，设置输入字段的合法数字间隔 | — | — | —
resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | —
autofocus | 原生属性，自动获取焦点 | boolean | true, false | false
form | 原生属性 | string | — | —
label | 输入框关联的label文字 | string | — | —
tabindex | 输入框的tabindex | string | - | -

### Input Slots

name | 说明
--- | ---
prefix | 输入框头部内容，只对 `type="text"` 有效
suffix | 输入框尾部内容，只对 `type="text"` 有效
prepend | 输入框前置内容，只对 `type="text"` 有效
append | 输入框后置内容，只对 `type="text"` 有效

### Input Events

事件名称 | 说明 | 回调参数
--- | --- | ---
blur | 在 Input 失去焦点时触发 | (event: Event)
focus | 在 Input 获得焦点时触发 | (event: Event)
change | 在 Input 值改变时触发 | (value: string | number)
clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | —

### Input Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 input 获取焦点 | —
blur | 使 input 失去焦点 | —
select | 选中 input 中的文字 | —

### Autocomplete Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
placeholder | 输入框占位文本 | string | — | —
disabled | 禁用 | boolean | — | false
value-key | 输入建议对象中用于显示的键名 | string | — | value
value | 必填值，输入绑定值 | string | — | —
debounce | 获取输入建议的去抖延时 | number | — | 300
placement | 菜单弹出位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start
fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | —
popper-class | Autocomplete 下拉列表的类名 | string | — | —
trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true
name | 原生属性 | string | — | —
select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false
label | 输入框关联的label文字 | string | — | —
prefix-icon | 输入框头部图标 | string | — | —
suffix-icon | 输入框尾部图标 | string | — | —
hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false

### Autocomplete Slots

name | 说明
--- | ---
prefix | 输入框头部内容
suffix | 输入框尾部内容
prepend | 输入框前置内容
append | 输入框后置内容

### Autocomplete Scoped Slot

name | 说明
--- | ---
— | 自定义输入建议，参数为 { item }

### Autocomplete Events

事件名称 | 说明 | 回调参数
--- | --- | ---
select | 点击选中建议项时触发 | 选中建议项

### Autocomplete Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 input 获取焦点 | -

###

###

# InputNumber 计数器

仅允许输入标准的数字值，可定义范围

#### 基础用法

#### 禁用状态

remarks

#### 步数

允许定义递增递减的步数控制

#### 精度

`precision` 的值必须是一个正整数，并且不能小于 `step` 的小数位数。

#### 尺寸

额外提供了 `medium`、`small`、`mini` 三种尺寸的数字输入框

#### 按钮位置

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
value | 绑定值 | number | — | —
min | 设置计数器允许的最小值 | number | — | -Infinity
max | 设置计数器允许的最大值 | number | — | Infinity
step | 计数器步长 | number | — | 1
precision | 数值精度 | number | — | —
size | 计数器尺寸 | string | large, small | —
disabled | 是否禁用计数器 | boolean | — | false
controls | 是否使用控制按钮 | boolean | — | true
controls-position | 控制按钮位置 | string | right | -
name | 原生属性 | string | — | —
label | 输入框关联的label文字 | string | — | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 绑定值被改变时触发 | 最后变更的值
blur | 在组件 Input 失去焦点时触发 | (event: Event)
focus | 在组件 Input 获得焦点时触发 | (event: Event)

### Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 input 获取焦点 | -

# Select 选择器

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

#### 基础用法

适用广泛的基础单选

#### 有禁用选项

#### 禁用状态

选择器不可用状态

#### 可清空单选

包含清空按钮，可将选择器清空为初始状态

#### 基础多选

适用性较广的基础多选，用 Tag 展示已选项

#### 自定义模板

可以自定义备选项

#### 分组

备选项进行分组展示

#### 可搜索

可以利用搜索功能快速查找选项

#### 远程搜索

从服务器搜索数据，输入关键字进行查找

#### 创建条目

可以创建并选中选项中不存在的条目

### Select Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
multiple | 是否多选 | boolean | — | false
disabled | 是否禁用 | boolean | — | false
value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value
size | 输入框尺寸 | string | medium/small/mini | —
clearable | 单选时是否可以清空选项 | boolean | — | false
collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false
multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0
name | select input 的 name 属性 | string | — | —
auto-complete | select input 的 autocomplete 属性 | string | — | off
placeholder | 占位符 | string | — | 请选择
filterable | 是否可搜索 | boolean | — | false
allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false
filter-method | 自定义搜索方法 | function | — | —
remote | 是否为远程搜索 | boolean | — | false
remote-method | 远程搜索方法 | function | — | —
loading | 是否正在从远程获取数据 | boolean | — | false
loading-text | 远程加载时显示的文字 | string | — | 加载中
no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据
no-data-text | 选项为空时显示的文字 | string | — | 无数据
popper-class | Select 下拉框的类名 | string | — | —
reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false
default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false
popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true
automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false

### Select Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 选中值发生变化时触发 | 目前的选中值
visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false
remove-tag | 多选模式下移除tag时触发 | 移除的tag值
clear | 可清空的单选模式下用户点击清空按钮时触发 | —
blur | 当 input 失去焦点时触发 | (event: Event)
focus | 当 input 获得焦点时触发 | (event: Event)

### Select Slots

name | 说明
--- | ---
— | Option 组件列表
prefix | Select 组件头部内容

### Option Group Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
label | 分组的组名 | string | — | —
disabled | 是否将该分组下所有选项置为禁用 | boolean | — | false

### Option Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
value | 选项的值 | string/number/object | — | —
label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | —
disabled | 是否禁用该选项 | boolean | — | false

### Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 input 获取焦点 | -
blur | 使 input 失去焦点，并隐藏下拉框 | -

# Cascader 级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

#### 基础用法

有两种触发子菜单的方式
默认 click 触发子菜单
hover 触发子菜单

#### 禁用选项

通过在数据源中设置`disabled` 字段来声明该选项是禁用的

#### 仅显示最后一级

可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。

#### 默认值

remarks

#### 选择即改变

点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。

#### 动态加载次级选项

当选中某一级时，动态加载该级下的选项。

#### 可搜索

可以快捷地搜索选项并选择。
只可选择最后一级菜单的选项
可选择任意一级菜单的选项

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
options | 可选项数据源，键名可通过 `props` 属性配置 | array | — | —
props | 配置选项，具体见下表 | object | — | —
value | 选中项绑定值 | array | — | —
separator | 选项分隔符 | string | — | 斜杠'/'
popper-class | 自定义浮层类名 | string | — | —
placeholder | 输入框占位文本 | string | — | 请选择
disabled | 是否禁用 | boolean | — | false
clearable | 是否支持清空选项 | boolean | — | false
expand-trigger | 次级菜单的展开方式 | string | click / hover | click
show-all-levels | 输入框中是否显示选中值的完整路径 | boolean | — | true
filterable | 是否可搜索选项 | boolean | — | —
debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300
change-on-select | 是否允许选择任意一级的选项 | boolean | — | false
size | 尺寸 | string | medium / small / mini | —
before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | —

### props

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
value | 指定选项的值为选项对象的某个属性值 | string | — | —
label | 指定选项标签为选项对象的某个属性值 | string | — | —
children | 指定选项的子选项为选项对象的某个属性值 | string | — | —
disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 当绑定值变化时触发的事件 | 当前值
active-item-change | 当父级选项变化时触发的事件，仅在 `change-on-select` 为 `false` 时可用 | 各父级选项组成的数组
blur | 在 Cascader 失去焦点时触发 | (event: Event)
focus | 在 Cascader 获得焦点时触发 | (event: Event)

# Switch 开关

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

#### 基本用法

#### 文字描述

#### 扩展的 value 类型

#### 禁用状态

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
disabled | 是否禁用 | boolean | — | false
width | switch 的宽度（像素） | number | — | 40
active-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 `active-text` | string | — | —
inactive-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text` | string | — | —
active-text | switch 打开时的文字描述 | string | — | —
inactive-text | switch 关闭时的文字描述 | string | — | —
active-value | switch 打开时的值 | boolean / string / number | — | true
inactive-value | switch 关闭时的值 | boolean / string / number | — | false
active-color | switch 打开时的背景色 | string | — | #409EFF
inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA
name | switch 对应的 name 属性 | string | — | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | switch 状态发生变化时的回调函数 | 新状态的值

### Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 Switch 获取焦点 | -

# Slider 滑块

通过拖动滑块在一个固定区间内进行选择

#### 基础用法

在拖动滑块时，显示当前值

#### 离散值

选项可以是离散的

#### 带有输入框

通过输入框设置精确数值

#### 范围选择

支持选择某一数值范围

#### 竖向模式

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
min | 最小值 | number | — | 0
max | 最大值 | number | — | 100
disabled | 是否禁用 | boolean | — | false
step | 步长 | number | — | 1
show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | — | false
show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true
input-size | 输入框的尺寸 | string | large / medium / small / mini | small
show-stops | 是否显示间断点 | boolean | — | false
show-tooltip | 是否显示 tooltip | boolean | — | true
format-tooltip | 格式化 tooltip message | function(value) | — | —
range | 是否为范围选择 | boolean | — | false
vertical | 是否竖向模式 | boolean | — | false
height | Slider 高度，竖向模式时必填 | string | — | —
label | 屏幕阅读器标签 | string | — | —
debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300
tooltip-class | tooltip 的自定义类名 | string | — | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | 改变后的值

# TimePicker 时间选择器

用于选择或输入日期

#### 固定时间点

提供几个固定的时间点供用户选择

#### 任意时间点

可以选择任意时间

#### 固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变

#### 任意时间范围

可选择任意的时间范围

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
readonly | 完全只读 | boolean | — | false
disabled | 禁用 | boolean | — | false
editable | 文本框可输入 | boolean | — | true
clearable | 是否显示清除按钮 | boolean | — | true
size | 输入框尺寸 | string | medium / small / mini | —
placeholder | 非范围选择时的占位内容 | string | — | —
start-placeholder | 范围选择时开始日期的占位内容 | string | — | —
end-placeholder | 范围选择时开始日期的占位内容 | string | — | —
is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false
arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false
value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | —
align | 对齐方式 | string | left / center / right | left
popper-class | TimePicker 下拉框的类名 | string | — | —
picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {}
range-separator | 选择范围时的分隔符 | string | - | '-'
value-format | 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | —
default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | —
name | 原生属性 | string | — | —
prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time
clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close

### Time Select Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
start | 开始时间 | string | — | 09:00
end | 结束时间 | string | — | 18:00
step | 间隔时间 | string | — | 00:30
minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00
maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | —

### Time Picker Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | —
format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss`，AM/PM `A` | 'HH:mm:ss'

### Events

事件名 | 说明 | 参数
--- | --- | ---
change | 用户确认选定的值时触发 | 组件绑定值
blur | 当 input 失去焦点时触发 | 组件实例
focus | 当 input 获得焦点时触发 | 组件实例

### Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 input 获取焦点 | -

# DatePicker 日期选择器

用于选择或输入日期

#### 选择日

以「日」为基本单位，基础的日期选择控件

#### 其他日期单位

通过扩展基础的日期选择，可以选择周、月、年或多个日期
周
月
年
多个日期

#### 选择日期范围

可在一个选择器中便捷地选择一个时间范围
在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。

## 日期格式

#### 使用format指定输入框的格式；使用value-format指定绑定值的格式。

#### 默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

请注意大小写

格式 | 含义 | 备注 | 举例
--- | --- | --- | ---
`yyyy` | 年 |  | 2017
`M` | 月 | 不补0 | 1
`MM` | 月 |  | 01
`W` | 周 | 仅周选择器的 `format` 可用；不补0 | 1
`WW` | 周 | 仅周选择器的 `format` 可用 | 01
`d` | 日 | 不补0 | 2
`dd` | 日 |  | 02
`H` | 小时 | 24小时制；不补0 | 3
`HH` | 小时 | 24小时制 | 03
`h` | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3
`hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03
`m` | 分钟 | 不补0 | 4
`mm` | 分钟 |  | 04
`s` | 秒 | 不补0 | 5
`ss` | 秒 |  | 05
`A` | AM/PM | 仅 `format` 可用，大写 | AM
`a` | am/pm | 仅 `format` 可用，小写 | am
`timestamp` | JS时间戳 | 仅 `value-format` 可用；组件绑定值为`number`类型 | 1483326245000

#### 默认显示日期

在选择日期范围时，指定起始日期和结束日期的默认时刻。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
readonly | 完全只读 | boolean | — | false
disabled | 禁用 | boolean | — | false
editable | 文本框可输入 | boolean | — | true
clearable | 是否显示清除按钮 | boolean | — | true
size | 输入框尺寸 | string | large, small, mini | —
placeholder | 非范围选择时的占位内容 | string | — | —
start-placeholder | 范围选择时开始日期的占位内容 | string | — | —
end-placeholder | 范围选择时结束日期的占位内容 | string | — | —
type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date
format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd
align | 对齐方式 | string | left, center, right | left
popper-class | DatePicker 下拉框的类名 | string | — | —
picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {}
range-separator | 选择范围时的分隔符 | string | — | '-'
default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | —
default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | —
value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | —
name | 原生属性 | string | — | —
unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false
prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date
clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close

### Picker Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | —
disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | —
firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7
onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | —

### Shortcuts

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
text | 标题文本 | string | — | —
onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制
blur | 当 input 失去焦点时触发 | 组件实例
focus | 当 input 获得焦点时触发 | 组件实例

### Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 input 获取焦点 | —

# DateTimePicker 日期时间选择器

在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

#### 日期和时间点

通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

#### 日期和时间范围

设置type为datetimerange即可选择日期和时间范围

#### 默认的起始与结束时刻

使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
readonly | 完全只读 | boolean | — | false
disabled | 禁用 | boolean | — | false
editable | 文本框可输入 | boolean | — | true
clearable | 是否显示清除按钮 | boolean | — | true
size | 输入框尺寸 | string | large, small, mini | —
placeholder | 非范围选择时的占位内容 | string | — | —
start-placeholder | 范围选择时开始日期的占位内容 | string | — | —
end-placeholder | 范围选择时结束日期的占位内容 | string | — | —
time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false
type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date
format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd
align | 对齐方式 | string | left, center, right | left
popper-class | DateTimePicker 下拉框的类名 | string | — | —
picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {}
range-separator | 选择范围时的分隔符 | string | - | '-'
default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | —
default-time | 选中日期后的默认具体时刻 | 非范围选择时：string / 范围选择时：string[] | 非范围选择时：形如`12:00:00`的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 `00:00:00` | —
value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | —
name | 原生属性 | string | — | —
unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false
prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date
clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close

### Picker Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | —
disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | —
firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7

### Shortcuts

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
text | 标题文本 | string | — | —
onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | —

### Events

Event Name | Description | Parameters
--- | --- | ---
change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制
blur | 当 input 失去焦点时触发 | 组件实例
focus | 当 input 获得焦点时触发 | 组件实例

### Methods

方法名 | 说明 | 参数
--- | --- | ---
focus | 使 input 获取焦点 | —

# Upload 上传

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

#### 点击上传

点击上传
只能上传jpg/png文件，且不超过500kb

#### 用户头像上传

使用 `before-upload` 限制用户上传的图片格式和大小。

#### 照片墙

使用 `list-type` 属性来设置文件列表的样式。

#### 图片列表缩略图

点击上传
只能上传jpg/png文件，且不超过500kb

#### 上传文件列表控制

通过 `on-change` 钩子函数来对列表进行控制
点击上传
只能上传jpg/png文件，且不超过500kb

#### 拖拽上传

remarks
将文件拖到此处，或点击上传
只能上传jpg/png文件，且不超过500kb

#### 手动上传

选取文件 上传到服务器
只能上传jpg/png文件，且不超过500kb

### Attribute

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
action | 必选参数，上传的地址 | string | — | —
headers | 设置上传的请求头部 | object | — | —
multiple | 是否支持多选文件 | boolean | — | —
data | 上传时附带的额外参数 | object | — | —
name | 上传的文件字段名 | string | — | file
with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false
show-file-list | 是否显示已上传文件列表 | boolean | — | true
drag | 是否启用拖拽上传 | boolean | — | false
accept | 接受上传的文件类型（thumbnail-mode 模式下此参数无效） | string | — | —
on-preview | 点击文件列表中已上传的文件时的钩子 | function(file) | — | —
on-remove | 文件列表移除文件时的钩子 | function(file, fileList) | — | —
on-success | 文件上传成功时的钩子 | function(response, file, fileList) | — | —
on-error | 文件上传失败时的钩子 | function(err, file, fileList) | — | —
on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | —
on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | —
before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | —
before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file, fileList) | — | —
list-type | 文件列表的类型 | string | text/picture/picture-card | text
auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true
file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | —
disabled | 是否禁用 | boolean | — | false
limit | 最大允许上传个数 | number | — | —
on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | -

### Methods

方法名 | 说明 | 参数
--- | --- | ---
clearFiles | 清空已上传的文件列表（该方法不支持在 before-upload 中调用） | —
abort | 取消上传请求 | （ file: fileList 中的 file 对象 ）

# Rate 评分

评分组件

#### 基础用法

默认不区分颜色
区分颜色

#### 辅助文字

#### 其它 icon

#### 只读

只读的评分用来展示分数，允许出现半星

#### 基础用法

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
max | 最大分值 | number | — | 5
disabled | 是否为只读 | boolean | — | false
allow-half | 是否允许半选 | boolean | — | false
low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2
high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4
colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color | 未选中 icon 的颜色 | string | — | #C6D1DE
disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7
icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off
disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on
show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false
show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false
text-color | 辅助文字的颜色 | string | — | #1F2D3D
texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜']
score-template | 分数显示模板 | string | — | {value}

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 分值改变时触发 | 改变后的分值

# ColorPicker 颜色选择器

用于颜色选择，支持多种格式。

#### 基础用法

有默认值
无默认值

#### 选择透明度

remarks

#### 预定义颜色

remarks

ColorPicker 支持预定义颜色

#### 不同尺寸

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
disabled | 是否禁用 | boolean | — | false
size | 尺寸 | string | — | medium / small / mini
show-alpha | 是否支持透明度选择 | boolean | — | false
color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true）
popper-class | ColorPicker 下拉框的类名 | string | — | —
predefine | 预定义颜色 | array | — | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 当绑定值变化时触发 | 当前值
active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值

# Transfer 穿梭框

#### 基础用法

Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。

#### 可搜索

在数据很多的情况下，可以对数据进行搜索和过滤。

设置 `filterable` 为 `true` 即可开启搜索模式。默认情况下，若数据项的 `label` 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 `filter-method` 定义自己的搜索逻辑。`filter-method` 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 `true`，则会在搜索结果中显示对应的数据项。

#### 可自定义

可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

可以使用 `titles`、`button-texts`、`render-content` 和 `format` 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 `scoped-slot` 进行自定义。对于列表底部的内容区，提供了两个具名 slot：`left-footer` 和 `right-footer`。此外，如果希望某些数据项在初始化时就被勾选，可以使用 `left-default-checked` 和 `right-default-checked` 属性。最后，本例还展示了 `change` 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 `render-content` 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。

#### 数据项属性别名

默认情况下，Transfer 仅能识别数据项中的 `key`、`label` 和 `disabled` 字段。如果你的数据的字段名不同，可以使用 `props` 属性为它们设置别名。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
data | Transfer 的数据源 | array[{ key, label, disabled }] | — | [ ]
filterable | 是否可搜索 | boolean | — | false
filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容
filter-method | 自定义搜索方法 | function | — | —
target-order | 右侧列表元素的排序策略：若为 `original`，则保持与数据源相同的顺序；若为 `push`，则新加入的元素排在最后；若为 `unshift`，则新加入的元素排在最前 | string | original / push / unshift | original
titles | 自定义列表标题 | array | — | ['列表 1', '列表 2']
button-texts | 自定义按钮文案 | array | — | [ ]
render-content | 自定义数据项渲染函数 | function(h, option) | — | —
format | 列表顶部勾选状态文案 | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }
props | 数据源的字段别名 | object{key, label, disabled} | — | —
left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | array | — | [ ]
right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | array | — | [ ]

### Slot

name | 说明
--- | ---
left-footer | 左侧列表底部的内容
right-footer | 右侧列表底部的内容

### Scoped Slot

name | 说明
--- | ---
— | 自定义数据项的内容，参数为 { option }

### Methods

方法名 | 说明 | 参数
--- | --- | ---
clearQuery | 清空某个面板的搜索关键词 | 'left' / 'right'，指定需要清空的面板

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 右侧列表元素变化时触发 | 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组
left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组

# Form 表单

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

#### 典型表单

包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
- 立即创建 取消

#### 行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
查询

#### 对齐方式

根据具体目标和制约因素，选择最佳的标签对齐方式。
左对齐 右对齐 顶部对齐

#### 表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
- 立即创建 重置

#### 自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
提交 重置

#### 动态增减表单项

删除 提交 新增域名 重置

#### 数字类型验证

提交 重置

嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。

#### 表单内组件尺寸控制

通过设置 Form 上的 `size` 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。

- 立即创建 取消

### Form Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
model | 表单数据对象 | object | — | —
rules | 表单验证规则 | object | — | —
inline | 行内表单模式 | boolean | — | false
label-position | 表单域标签的位置 | string | right/left/top | right
label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | —
label-suffix | 表单域标签的后缀 | string | — | —
show-message | 是否显示校验错误信息 | boolean | — | true
inline-message | 是否以行内形式展示校验信息 | boolean | — | false
status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false
validate-on-rule-change | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | — | true
size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | —
disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false

### Form Methods

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

### Form Events

事件名称 | 说明 | 回调参数
--- | --- | ---
validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过

### Form-Item Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 `model` 中的字段 | —
label | 标签文本 | string | — | —
label-width | 表单域标签的的宽度，例如 '50px' | string | — | —
required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false
rules | 表单验证规则 | object | — | —
error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | —
show-message | 是否显示校验错误信息 | boolean | — | true
inline-message | 以行内形式展示校验信息 | boolean | — | false
size | 用于控制该表单域下组件的尺寸 | string | medium / small / mini | -

### Form-Item Slot

name | 说明
--- | ---
— | Form Item 的内容
label | 标签文本的内容

### Form-Item Methods

方法名 | 说明 | 参数
--- | --- | ---
resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | -
clearValidate | 移除该表单项的校验结果 | -

# Table 表格

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

#### 基础表格

基础的表格展示用法。

#### 带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

#### 带边框表格

默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。

#### 固定表头

#### 固定列

横向内容过多时，可选择固定列。

固定列需要使用`fixed`属性，它接受 Boolean 值或者`left` `right`，表示左边固定还是右边固定。

#### 固定列和表头

横纵内容过多时，可选择固定列和表头。

固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

#### 流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。

通过设置`max-height`属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

#### 多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

#### 单选

选择单行数据时使用色块表示。

Table 组件提供了单选的支持，只需要配置`highlight-current-row`属性即可实现单选。之后由`current-change`事件来管理选中时触发的事件，它会传入`currentRow`，`oldCurrentRow`。如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。

#### 多选

选择多行数据时使用 Checkbox。

实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。

#### 排序

对表格进行排序，可快速查找或对比数据。

在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 Table 的`default-sort`属性设置默认的排序列和排序顺序。可以使用`sort-method`或者`sort-by`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 Table 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。

#### 筛选

对表格进行筛选，可快速查找到自己想看的数据。

在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。

#### 自定义列模板

自定义列的显示内容，可组合其他组件使用。

通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

#### 展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `Scoped slot` 相同。

#### 表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。

将`show-summary`设置为`true`就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过`sum-text`配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用`summary-method`并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

#### 合并行或列

多行或多列共用一个数据时，可以合并行或列。

通过给`table`传入`span-method`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象。

#### 自定义索引

自定义 `type=index` 列的行号。

通过给 `type=index` 的列传入 `index` 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 `0` 开始）作为参数，返回值将作为索引展示。

### Table Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
data | 显示的数据 | array | — | —
height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | string/number | — | —
max-height | Table 的最大高度 | string/number | — | —
stripe | 是否为斑马纹 table | boolean | — | false
border | 是否带有纵向边框 | boolean | — | false
size | Table 的尺寸 | string | medium / small / mini | —
fit | 列的宽度是否自撑开 | boolean | — | true
show-header | 是否显示表头 | boolean | — | true
highlight-current-row | 是否要高亮当前行 | boolean | — | false
current-row-key | 当前行的 key，只写属性 | String,Number | — | —
row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | —
row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | —
cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | —
cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | —
header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | —
header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | —
header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | —
header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | —
row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | —
empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据
default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false
expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 | Array | — |
default-sort | 默认的排序列的 prop 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序 | Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending
tooltip-effect | tooltip `effect` 属性 | String | dark/light |
show-summary | 是否在表尾显示合计行 | Boolean | — | false
sum-text | 合计行第一列的文本 | String | — | 合计
summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | —
span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | —
select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true

### Table Events

事件名 | 说明 | 参数
--- | --- | ---
select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row
select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection
selection-change | 当选择项发生变化时会触发该事件 | selection
cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event
cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event
cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event
cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event
row-click | 当某一行被点击时会触发该事件 | row, event, column
row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event
row-dblclick | 当某一行被双击时会触发该事件 | row, event
header-click | 当某一列的表头被点击时会触发该事件 | column, event
header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event
sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order }
filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters
current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow
header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event
expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows

### Table Methods

方法名 | 说明 | 参数
--- | --- | ---
clearSelection | 用于多选表格，清空用户的选择 | —
toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected
toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded
setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row
clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | —
clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | —
doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | —
sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string

### Table Slot

name | 说明
--- | ---
append | 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。

### Table-column Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮 | string | selection/index/expand | —
index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | string, Function(index) | - | -
column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | —
label | 显示的标题 | string | — | —
prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | —
width | 对应列的宽度 | string | — | —
min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | —
fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | —
render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | —
sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false
sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | — | —
sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | String/Array/Function(row, index) | — | —
sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | array | 数组中的元素需为以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序 | ['ascending', 'descending', null]
resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true
formatter | 用来格式化内容 | Function(row, column, cellValue, index) | — | —
show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false
align | 对齐方式 | String | left/center/right | left
header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | —
class-name | 列的 className | string | — | —
label-class-name | 当前列标题的自定义类名 | string | — | —
selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | —
reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`） | Boolean | — | false
filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | —
filter-placement | 过滤弹出框的定位 | String | 与 Tooltip 的 `placement` 属性相同 | —
filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true
filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) | — | —
filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | —

### Table-column Scoped Slot

name | 说明
--- | ---
— | 自定义列的内容，参数为 { row, column, $index }

# Tag 标签

用于标记和选择。

#### 基础用法

由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。

标签一 标签二 标签三 标签四 标签五

#### 可移除标签

设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。

{{tag.name}}

#### 动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的`close` 事件来实现
{{tag}} + New Tag

#### 不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。

默认标签 中等标签 小型标签 超小标签

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
type | 主题 | string | success/info/warning/danger | —
closable | 是否可关闭 | boolean | — | false
disable-transitions | 是否禁用渐变动画 | boolean | — | false
hit | 是否有边框描边 | boolean | — | false
color | 背景色 | string | — | —
size | 尺寸 | string | medium / small / mini | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
close | 关闭 Tag 时触发的事件 | —

# Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

#### 线形进度条 — 百分比外显

remarks

Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，必填，必须在 0-100。

#### 线形进度条 — 百分比内显

百分比不占用额外控件，适用于文件上传等场景。

Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。

#### 环形进度条

Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
percentage | 百分比（必填） | number | 0-100 | 0
type | 进度条类型 | string | line/circle | line
stroke-width | 进度条的宽度，单位 px | number | — | 6
text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false
status | 进度条当前状态 | string | success/exception | —
color | 进度条背景色（会覆盖 status 状态颜色） | string | — | —
width | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126
show-text | 是否显示进度条文字内容 | boolean | — | true

# Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

#### 基础用法

基础的树形结构展示。

#### 可选择

适用于需要选择层级时使用。

#### 懒加载自定义叶子节点

由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

#### 默认展开和默认选中

可将 Tree 的某些节点设置为默认展开或默认选中

分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

#### 禁用状态

可将 Tree 的某些节点设置为禁用状态

通过`disabled`设置禁用状态。

#### 树节点的选择

本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。

通过 node 获取 通过 key 获取 通过 node 设置 通过 key 设置 清空

#### 自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

可以通过两种方法进行树节点内容的自定义：`render-content`和 scoped slot。使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数`node`和`data`，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以`render-content`示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。

使用 render-content

使用 scoped slot

{{ node.label }} Append Delete

#### 节点过滤

通过关键字过滤树节点

在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。

#### 手风琴模式

对于同一级的节点，每次只能展开一个

#### 可拖拽节点

通过 draggable 属性可让节点变为可拖拽。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
data | 展示数据 | array | — | —
empty-text | 内容为空的时候展示的文本 | String | — | —
node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | — | —
props | 配置选项，具体看下表 | object | — | —
render-after-expand | 是否在第一次展开某个树节点后才渲染其子节点 | boolean | — | true
load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | function(node, resolve) | — | —
render-content | 树节点的内容区的渲染 Function | Function(h, { node, data, store } | — | —
highlight-current | 是否高亮当前选中节点，默认值是 false。 | boolean | — | false
default-expand-all | 是否默认展开所有节点 | boolean | — | false
expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true
check-on-click-node | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean | — | false
auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true
default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | —
show-checkbox | 节点是否可被选择 | boolean | — | false
check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false
default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | —
filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | —
accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false
indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16
lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false
draggable | 是否开启拖拽节点功能 | boolean | — | false
allow-drag | 判断节点能否被拖拽 | Function(node) | — | —
allow-drop | 拖拽时判定目标节点能否被放置。`type` 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type) | — | —

### props

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | —
children | 指定子树为节点对象的某个属性值 | string | — | —
disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) | — | —
isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) | — | —

### 方法

`Tree` 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。 `Tree` 拥有如下方法：

方法名 | 说明 | 参数
--- | --- | ---
filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数
updateKeyChildren | 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性 | (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组
getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false`
setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组
getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false`
setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `false`
setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false
getHalfCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点所组成的数组 | -
getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | -
getCurrentKey | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | —
getCurrentNode | 获取当前被选中节点的 node，若没有节点被选中则返回 null | —
setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点
setCurrentNode | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node
getNode | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data
remove | 删除 Tree 中的一个节点 | (data) 要删除的节点的 data、key 或者 node
append | 为 Tree 中的一个节点追加一个子节点 | (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
insertBefore | 为 Tree 的一个节点的前面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
insertAfter | 为 Tree 的一个节点的后面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
check-change | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check | 当复选框被点击的时候触发 | 共两个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
node-expand | 节点被展开时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse | 节点被关闭时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-drag-start | 节点开始拖拽时触发的事件 | 共两个参数，依次为：被拖拽节点对应的 Node、event
node-drag-enter | 拖拽进入其他节点时触发的事件 | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event
node-drag-leave | 拖拽离开某个节点时触发的事件 | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event
node-drag-over | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event
node-drag-end | 拖拽结束时（可能未成功）触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
node-drop | 拖拽成功完成时触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event

### Scoped Slot

name | 说明
--- | ---
— | 自定义树节点的内容，参数为 { node, data }

# Pagination 分页

当数据量过多时，使用分页分解数据。

#### 基础用法

设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。

页数较少时的效果
大于 7 页时的效果

#### 设置最大页码按钮数

remarks

默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过`pager-count`属性可以设置最大页码按钮数。

#### 带有背景色的分页

设置`background`属性可以为分页按钮添加背景色。

#### 小型分页

在空间有限的情况下，可以使用简单的小型分页。

只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。

#### 附加功能

根据场景需要，可以添加其他功能模块。

此例是一个完整的用例，使用了`size-change`和`current-change`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
small | 是否使用小型分页样式 | Boolean | — | false
background | 是否为分页按钮添加背景色 | Boolean | — | false
page-size | 每页显示条目个数 | Number | — | 10
total | 总条目数 | Number | — | —
page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | —
pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | Number | 大于等于 5 且小于等于 21 的奇数 | 7
current-page | 当前页数，支持 .sync 修饰符 | Number | — | 1
layout | 组件布局，子组件名用逗号分隔 | String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'
page-sizes | 每页显示个数选择器的选项设置 | Number[] | — | [10, 20, 30, 40, 50, 100]
popper-class | 每页显示个数选择器的下拉框类名 | string | — | —
prev-text | 替代图标显示的上一页文字 | string | — | —
next-text | 替代图标显示的下一页文字 | string | — | —
disabled | 是否禁用 | boolean | — | false

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
size-change | pageSize 改变时会触发 | 每页条数
current-change | currentPage 改变时会触发 | 当前页
prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页
next-click | 用户点击下一页按钮改变当前页后触发 | 当前页

### Slot

name | 说明
--- | ---
— | 自定义内容，需要在 `layout` 中列出 `slot`

# Badge 标记

出现在按钮、图标旁的数字或状态标记。

#### 基础用法

remarks

定义`value`属性，它接受`Number`或者`String`。

评论 回复

点我查看 评论 回复

#### 最大值

可自定义最大值。

由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。

评论 回复

#### 自定义内容

可以显示数字以外的文本内容。

定义`value`为`String`类型是时可以用于显示自定义文本。

评论 回复

#### 小红点

以红点的形式标注需要关注的内容。

除了数字外，设置`is-dot`属性，它接受一个`Boolean`。

数据查询

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
value | 显示值 | string, number | — | —
max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | —
is-dot | 小圆点 | boolean | — | false
hidden | 隐藏 badge | boolean | — | false

# Alert 警告

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

#### 基本用法

页面中的非浮层元素，不会自动消失。

Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。

#### 自定义关闭按钮

自定义关闭按钮为文字或其他符号。

在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。

#### 带有 icon

表示某种状态时提升可读性。

通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。

#### 文字居中

使用 `center` 属性让文字水平居中。

#### 带有辅助性文字介绍

包含标题和内容，解释更详细的警告。

除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。

#### 带有 icon 和辅助性文字介绍

最后，这是一个同时具有 icon 和辅助性文字的样例。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
title | 标题，必选参数 | string | — | —
type | 主题 | string | success/warning/info/error | info
description | 辅助性文字。也可通过默认 slot 传入 | string | — | —
closable | 是否可关闭 | boolean | — | true
center | 文字是否居中 | boolean | — | true
close-text | 关闭按钮自定义文本 | string | — | —
show-icon | 是否显示图标 | boolean | — | false

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
close | 关闭alert时触发的事件 | —

# Loading 加载

加载数据时显示动效。

#### 区域加载

在表格等容器中加载数据时显示。

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。

#### 自定义

可自定义加载文案、图标和背景色。

在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，`element-loading-spinner`和`element-loading-background`属性分别用来设定图标类名和背景色值。

#### 整页加载

页面数据加载时显示。

当使用指令方式时，全屏遮罩需要添加`fullscreen`修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用`lock`修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

# 服务

Loading 还可以以服务的方式调用。引入 Loading 服务：

在需要调用时：

`Loading.service(options);`

其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：

`let loadingInstance = Loading.service(options); this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭 loadingInstance.close(); });`

需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：

`let loadingInstance1 = Loading.service({ fullscreen: true }); let loadingInstance2 = Loading.service({ fullscreen: true }); console.log(loadingInstance1 === loadingInstance2); // true`

此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。

如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。

### Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body
body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false
fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true
lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false
text | 显示在加载图标下方的加载文案 | string | — | —
spinner | 自定义加载图标类名 | string | — | —
background | 遮罩背景色 | string | — | —
customClass | Loading 的自定义类名 | string | — | —

# Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

#### 基础用法

从顶部出现，3 秒后自动消失。

Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

#### 不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

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

#### 可关闭

可以添加关闭按钮。

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

#### 文字居中

使用`center` 属性让文字水平居中。

#### 使用 HTML 片段

message 属性支持传入 HTML 片段

将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。

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

# 全局方法

Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。

### Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
message | 消息文字 | string / VNode | — | —
type | 主题 | string | success/warning/info/error | info
iconClass | 自定义图标的类名，会覆盖 `type` | string | — | —
dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false
customClass | 自定义类名 | string | — | —
duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000
showClose | 是否显示关闭按钮 | boolean | — | false
center | 文字是否居中 | boolean | — | false
onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | —

### 方法

调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。

方法名 | 说明
--- | ---
close | 关闭当前的 Message

# MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

从场景上说，MessageBox 的作用是美化系统自带的 `alert`、`confirm` 和 `prompt`，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

#### 消息提示

当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。

#### 确认消息

提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。

#### 提交内容

当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。

调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，返回`false`或字符串时均表示校验未通过，同时返回的字符串相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。

#### 自定义

可自定义配置不同内容。

以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了`beforeClose`属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数：`action`、实例本身和`done`方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加`loading`状态等；此时若需要关闭实例，可以调用`done`方法（若在`beforeClose`中没有调用`done`，则实例不会关闭）。

弹出层的内容可以是 `VNode`，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 `VNode` 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 #8931。当这类问题出现时，解决方案是给 `VNode` 加上一个不相同的 key，参考这里。

#### 使用 HTML 片段

message 属性支持传入 HTML 片段。

将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。

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

#### 区分取消与关闭

有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。

默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和`callback`回调的参数均为 'cancel'。如果将`distinguishCancelAndClose`属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。

#### 居中布局

内容支持居中布局

将 `center` 设置为 `true` 即可开启居中布局

# 全局方法

如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：

- `$msgbox(options)`
- `$alert(message, title, options)` 或 `$alert(message, options)`
- `$confirm(message, title, options)` 或 `$confirm(message, options)`
- `$prompt(message, title, options)` 或 `$prompt(message, options)`

### Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
title | MessageBox 标题 | string | — | —
message | MessageBox 消息正文内容 | string / VNode | — | —
dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false
type | 消息类型，用于显示图标 | string | success / info / warning / error | —
iconClass | 自定义图标的类名，会覆盖 `type` | string | — | —
customClass | MessageBox 的自定义类名 | string | — | —
callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | —
showClose | MessageBox 是否显示右上角关闭按钮 | boolean | — | true
beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | —
distinguishCancelAndClose | 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分 | boolean | — | false
lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true
showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true）
showConfirmButton | 是否显示确定按钮 | boolean | — | true
cancelButtonText | 取消按钮的文本内容 | string | — | 取消
confirmButtonText | 确定按钮的文本内容 | string | — | 确定
cancelButtonClass | 取消按钮的自定义类名 | string | — | —
confirmButtonClass | 确定按钮的自定义类名 | string | — | —
closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false）
closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false）
closeOnHashChange | 是否在 hashchange 时关闭 MessageBox | boolean | — | true
showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）
inputPlaceholder | 输入框的占位符 | string | — | —
inputType | 输入框的类型 | string | — | text
inputValue | 输入框的初始文本 | string | — | —
inputPattern | 输入框的校验表达式 | regexp | — | —
inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | —
inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法!
center | 是否居中布局 | boolean | — | false
roundButton | 是否使用圆角按钮 | boolean | — | false

# Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息。

#### 基本用法

适用性广泛的通知栏

Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。

#### 带有倾向性

带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息

Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。

#### 自定义弹出位置

可以让 Notification 从屏幕四角中的任意一角弹出

使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。

#### 带有偏移

让 Notification 偏移一些位置

Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。

#### 使用 HTML 片段

message 属性支持传入 HTML 片段

将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。

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

#### 隐藏关闭按钮

可以不显示关闭按钮

将`showClose`属性设置为`false`即可隐藏关闭按钮。

### Options

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
title | 标题 | string | — | —
message | 说明文字 | string/Vue.VNode | — | —
dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false
type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | —
iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | —
customClass | 自定义类名 | string | — | —
duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500
position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right
showClose | 是否显示关闭按钮 | boolean | — | true
onClose | 关闭时的回调函数 | function | — | —
onClick | 点击 Notification 时的回调函数 | function | — | —
offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0

### 方法

调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。

方法名 | 说明
--- | ---
close | 关闭当前的 Notification

# NavMenu 导航菜单

为网站提供导航功能的菜单。

#### 顶栏

适用广泛的基础用法。

导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

处理中心
选项1 选项2 选项3
选项1 选项2 选项3 消息中心 订单管理
处理中心
选项1 选项2 选项3
选项1 选项2 选项3 消息中心 订单管理

#### 侧栏

垂直菜单，可内嵌子菜单。

通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。

##### 默认颜色

选项1 选项2 选项3
选项1 导航二 导航三 导航四

##### 自定义颜色

选项1 选项2 选项3
选项1 导航二 导航三 导航四

#### 折叠

remarks
展开 收起
分组一 选项1 选项2 选项3 选项4 选项1 导航二 导航三 导航四

### Menu Attribute

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
mode | 模式 | string | horizontal / vertical | vertical
collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） | boolean | — | false
background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff
text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #303133
active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF
default-active | 当前激活菜单的 index | string | — | —
default-openeds | 当前打开的 sub-menu 的 index 的数组 | Array | — | —
unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false
menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | — | hover
router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false
collapse-transition | 是否开启折叠动画 | boolean | — | true

### Menu Methods

事件名称 | 说明 | 参数
--- | --- | ---
open | 展开指定的 sub-menu | index: 需要打开的 sub-menu 的 index
close | 收起指定的 sub-menu | index: 需要收起的 sub-menu 的 index

### Menu Events

事件名称 | 说明 | 回调参数
--- | --- | ---
select | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
open | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
close | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path

### SubMenu Attribute

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
index | 唯一标志 | string | — | —
popper-class | 弹出菜单的自定义类名 | string | — | —
show-timeout | 展开 sub-menu 的延时 | number | — | 300
hide-timeout | 收起 sub-menu 的延时 | number | — | 300
disabled | 是否禁用 | boolean | — | false
popper-append-to-body | 是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性 | boolean | — | 一级子菜单：true / 非一级子菜单：false

### Menu-Item Attribute

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
index | 唯一标志 | string | — | —
route | Vue Router 路径对象 | Object | — | —
disabled | 是否禁用 | boolean | — | false

### Menu-Group Attribute

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
title | 分组标题 | string | — | —

# Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

#### 基础用法

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。

#### 选项卡样式

选项卡样式的标签页。

只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。

#### 卡片化

卡片化的标签页。

将`type`设置为`border-card`。

用户管理 配置管理 角色管理 定时任务补偿

#### 位置

可以通过 tab-position 设置标签的位置

#### 自定义标签页

可以通过具名 slot 来实现自定义标签页的内容
我的行程 我的行程 消息中心 角色管理 定时任务补偿

#### 动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用
{{item.content}}

#### 自定义增加标签页触发器

remarks
add tab
{{item.content}}

### Tabs Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
type | 风格类型 | string | card/border-card | —
closable | 标签是否可关闭 | boolean | — | false
addable | 标签是否可增加 | boolean | — | false
editable | 标签是否同时可增加和关闭 | boolean | — | false
value | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name
tab-position | 选项卡所在位置 | string | top/right/bottom/left | top
stretch | 标签的宽度是否自撑开 | boolean | - | false
before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | —

### Tabs Events

事件名称 | 说明 | 回调参数
--- | --- | ---
tab-click | tab 被选中时触发 | 被选中的标签 tab 实例
tab-remove | 点击 tab 移除按钮后触发 | 被删除的标签的 name
tab-add | 点击 tabs 的新增按钮后触发 | —
edit | 点击 tabs 的新增按钮或 tab 被关闭后触发 | (targetName, action)

### Tab-pane Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
label | 选项卡标题 | string | — | —
disabled | 是否禁用 | boolean | — | false
name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'
closable | 标签是否可关闭 | boolean | — | false
lazy | 标签是否延迟渲染 | boolean | — | false

# Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

#### 基础用法

适用广泛的基础用法。

在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。

首页 活动管理 活动列表 活动详情

#### 图标分隔符

remarks

通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效

首页 活动管理 活动列表 活动详情

### Breadcrumb Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
separator | 分隔符 | string | — | 斜杠'/'
separator-class | 图标分隔符 class | string | — | -

### Breadcrumb Item Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
to | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | —
replace | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false

# Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

#### 基础用法

移动到下拉菜单上，展开更多操作。

通过组件`slot`来设置下拉触发的元素以及需要通过具名`slot`为`dropdown` 来设置下拉菜单。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。

下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

#### 触发对象

可使用按钮触发下拉菜单。

设置`split-button`属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为`true`即可。

更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

#### 触发方式

可以配置 click 激活或者 hover 激活。

在`trigger`属性设置为`click`即可。

hover 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 click 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

#### 菜单隐藏方式

可以hide-on-click属性来配置。
下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

#### 指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作
下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

#### 不同尺寸

Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
默认尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

中等尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

小型尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

超小尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎

### Dropdown Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
type | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | —
size | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效 | string | medium / small / mini | —
split-button | 下拉触发元素呈现为按钮组 | boolean | — | false
placement | 菜单弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end
trigger | 触发下拉的行为 | string | hover, click | hover
hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | — | true
show-timeout | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效） | number | — | 250
hide-timeout | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效） | number | — | 150

### Dropdown Events

事件名称 | 说明 | 回调参数
--- | --- | ---
click | `split-button` 为 true 时，点击左侧按钮的回调 | —
command | 点击菜单项触发的事件回调 | dropdown-item 的指令
visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false

### Dropdown Menu Item Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
command | 指令 | string/number/object | — | —
disabled | 禁用 | boolean | — | false
divided | 显示分割线 | boolean | — | false

# Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

#### 基础用法

简单的步骤条。
下一步

#### 含状态步骤条

每一步骤显示出该步骤的状态。

也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。

#### 有描述的步骤条

每个步骤有其对应的步骤状态描述。

#### 居中的步骤条

标题和描述都将居中。

#### 带图标的步骤条

步骤条内可以启用各种自定义的图标。

通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。

#### 竖式步骤条

竖直方向的步骤条。

只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。

#### 简洁风格的步骤条

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

### Steps Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | —
direction | 显示方向 | string | vertical/horizontal | horizontal
active | 设置当前激活步骤 | number | — | 0
process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process
finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish
align-center | 进行居中对齐 | boolean | - | false
simple | 是否应用简洁风格 | boolean | - | false

### Step Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
title | 标题 | string | — | —
description | 描述性文字 | string | — | —
icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入 | string | —
status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |

### Step Slot

name | 说明
--- | ---
icon | 图标
title | 标题
description | 描述性文字

# Title

remarks

#### Title

remarks

# Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

#### 基础用法

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

上左 上边 上右
左上 左边 左下
右上 右边 右下
下左 下边 下右

#### 主题

Tooltip 组件提供了两个不同的主题：dark和light。

通过设置`effect`属性来改变主题，默认为`dark`。

Dark Light

#### 更多 Content

展示多行文本或者是设置文本内容的格式

用具名 slot 分发`content`，替代`tooltip`中的`content`属性。

多行信息
第二行信息
Top center

#### 高级扩展

除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：

`transition` 属性可以定制显隐的动画效果，默认为`fade-in-linear`。 如果需要关闭 `tooltip` 功能，`disabled` 属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。

事实上，这是基于 Vue-popper 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。 当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。

tooltip 内不支持 `router-link` 组件，请使用 `vm.$router.push` 代替。

tooltip 内不支持 disabled form 元素，参考MDN，请在 disabled form 元素外层添加一层包裹元素。

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
effect | 默认提供的主题 | String | dark/light | dark
content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | — | —
placement | Tooltip 的出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom
value(v-model) | 状态是否可见 | Boolean | — | false
disabled | Tooltip 是否可用 | Boolean | — | false
offset | 出现位置的偏移量 | Number | — | 0
transition | 定义渐变动画 | String | — | el-fade-in-linear
visible-arrow | 是否显示 Tooltip 箭头，更多参数可见Vue-popper | Boolean | — | true
popper-options | popper.js 的参数 | Object | 参考 popper.js 文档 | { boundariesElement: 'body', gpuAcceleration: false }
open-delay | 延迟出现，单位毫秒 | Number | — | 0
manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false
popper-class | 为 Tooltip 的 popper 添加类名 | String | — | —
enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true
hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0

# Popover 弹出框

#### 基础用法

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。

`trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot="reference"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。

hover 激活

click 激活

focus 激活

#### 嵌套信息

可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。
click 激活

#### 嵌套操作

当然，你还可以嵌套操作，这相比 Dialog 更为轻量：

这是一段内容这是一段内容确定删除吗？

取消 确定
删除

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
trigger | 触发方式 | String | click/focus/hover/manual | click
title | 标题 | String | — | —
content | 显示的内容，也可以通过 `slot` 传入 DOM | String | — | —
width | 宽度 | String, Number | — | 最小宽度 150px
placement | 出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom
disabled | Popover 是否可用 | Boolean | — | false
value(v-model) | 状态是否可见 | Boolean | — | false
offset | 出现位置的偏移量 | Number | — | 0
transition | 定义渐变动画 | String | — | fade-in-linear
visible-arrow | 是否显示 Tooltip 箭头，更多参数可见Vue-popper | Boolean | — | true
popper-options | popper.js 的参数 | Object | 参考 popper.js 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }`
popper-class | 为 popper 添加类名 | String | — | —
open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | —

### Slot

参数 | 说明
--- | ---
— | Popover 内嵌 HTML 文本
reference | 触发 Popover 显示的 HTML 元素

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
show | 显示时触发 | —
after-enter | 显示动画播放完毕后触发 | —
hide | 隐藏时触发 | —
after-leave | 隐藏动画播放完毕后触发 | —

# Card 卡片

将信息聚合在卡片容器中展示。

#### 基础用法

包含标题，内容和操作。

卡片名称 操作按钮
{{'列表内容 ' + o }}

#### 简单卡片

卡片可以只有内容区域。

{{'列表内容 ' + o }}

#### 带图片

可配置定义更丰富的内容展示。

好吃的汉堡

{{ currentDate44 }} 操作按钮

#### 卡片阴影

可对阴影的显示进行配置。

通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。

总是显示 鼠标悬浮时显示 从不显示

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
header | 设置 header，也可以通过 `slot#header` 传入 DOM | string | — | —
body-style | 设置 body 的样式 | object | — | { padding: '20px' }
shadow | 设置阴影显示时机 | string | always / hover / never | always

# Carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容

#### 基础用法

适用广泛的基础用法

结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。

#### 指示器

可以将指示器的显示位置设置在容器外部

#### 切换箭头

可以设置切换箭头的显示时机

`arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。

#### 卡片化

当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格

将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。

### Carousel Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
height | 走马灯的高度 | string | — | —
initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | — | 0
trigger | 指示器的触发方式 | string | click | —
autoplay | 是否自动切换 | boolean | — | true
interval | 自动切换的时间间隔，单位为毫秒 | number | — | 3000
indicator-position | 指示器的位置 | string | outside/none | —
arrow | 切换箭头的显示时机 | string | always/hover/never | hover
type | 走马灯的类型 | string | card | —

### Carousel Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引

### Carousel Methods

方法名 | 说明 | 参数
--- | --- | ---
setActiveItem | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始；或相应 `el-carousel-item` 的 `name` 属性值
prev | 切换至上一张幻灯片 | —
next | 切换至下一张幻灯片 | —

### Carousel-Item Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
name | 幻灯片的名字，可用作 `setActiveItem` 的参数 | string | — | —
label | 该幻灯片所对应指示器的文本 | string | — | —

# Collapse 折叠面板

通过折叠面板收纳内容区域

#### 基础用法

可同时展开多个面板，面板之间不影响
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

#### 手风琴效果

每次只能展开一个面板
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

#### 自定义面板标题

除了可以通过 `title` 属性以外，还可以通过具名 `slot` 来实现自定义面板的标题内容，以实现增加图标等效果。
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

### Collapse Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
accordion | 是否手风琴模式 | boolean | — | false
value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | —

### Collapse Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array|string)

### Collapse Item Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
name | 唯一标志符 | string/number | — | —
title | 面板标题 | string | — | —

# Ajax调用

#### 基础用法

主要按钮
<#--$(function(){--> <#--$.services.example({}).then(function(data){--> <#--if (data.errors.length > 0) {--> <#--toast.e(data.errors[0].message, 1000);--> <#--} else {--> <#--toast.i("Ajax调用成功!", 1000);--> <#--}--> <#--})--> <#--})-->