From 9919ef5c8a3febb224e96be172665b9fe9b3ca3c Mon Sep 17 00:00:00 2001
From: SkyAo <csvwolf@qq.com>
Date: Fri, 26 Aug 2016 18:34:54 +0800
Subject: [PATCH] change all rewrited components documents to new templates

---
 examples/docs/badge.md        |  13 ++--
 examples/docs/breadcrumb.md   |   7 +-
 examples/docs/button.md       |  17 +++--
 examples/docs/card.md         |  10 ++-
 examples/docs/checkbox.md     |  12 +--
 examples/docs/dialog.md       |  16 ++--
 examples/docs/dropdown.md     | 134 +++++-----------------------------
 examples/docs/icon.md         |   2 +-
 examples/docs/input-number.md |  12 +--
 examples/docs/loading.md      |   6 +-
 examples/docs/message-box.md  |  12 +--
 examples/docs/pagination.md   |  63 ++++------------
 examples/docs/popover.md      |  92 ++++-------------------
 examples/docs/progress.md     |  24 ++----
 examples/docs/radio.md        |  81 ++++++--------------
 examples/docs/steps.md        |  89 +++++-----------------
 examples/docs/table.md        |   7 +-
 examples/docs/tabs.md         |  14 ++--
 examples/docs/tag.md          |  13 ++--
 examples/docs/tooltip.md      |  78 +++++---------------
 packages/table/src/table.vue  |  13 ++--
 21 files changed, 207 insertions(+), 508 deletions(-)

diff --git a/examples/docs/badge.md b/examples/docs/badge.md
index 646942b7f..d1f0497eb 100644
--- a/examples/docs/badge.md
+++ b/examples/docs/badge.md
@@ -1,4 +1,7 @@
-## 基础用法
+## Badge 标记
+出现在按钮、图标旁的数字或状态标记
+
+### 基础用法
 Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数。
 
 :::demo 定义`value`属性，它接受`Number`或者`String`。
@@ -24,7 +27,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
 ```
 :::
 
-## 最大值
+### 最大值
 为了方便使用，Badge 组件可以自定义显示的最大值。
 
 :::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
@@ -39,7 +42,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
 ```
 :::
 
-## 自定义内容
+### 自定义内容
 
 下面是两个样例，它们可以启发你在适时的情况使用 Badge：
 
@@ -55,7 +58,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
 ```
 :::
 
-## 小红点
+### 小红点
 
 可以使 Badge 组件显示为一个小红点，来提醒用户需要关注的内容，此时设置其他属性均无效。
 
@@ -90,7 +93,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
   }
 </style>
 
-## Attributes
+### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | value          | 显示值      | string, number          |                       |         |
diff --git a/examples/docs/breadcrumb.md b/examples/docs/breadcrumb.md
index 7f702c42b..6a44f3525 100644
--- a/examples/docs/breadcrumb.md
+++ b/examples/docs/breadcrumb.md
@@ -1,4 +1,7 @@
-## 基础使用
+## Breadcrumb 面包屑
+显示当前页面的路径，快速返回之前的任意页面
+
+### 基础使用
 
 Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
 
@@ -14,7 +17,7 @@ Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路
 ```
 :::
 
-## Attributes
+### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | 分隔符 | string | | 斜杠'/' |
diff --git a/examples/docs/button.md b/examples/docs/button.md
index b89321c9b..c89e1d398 100644
--- a/examples/docs/button.md
+++ b/examples/docs/button.md
@@ -29,7 +29,10 @@
   }
 </style>
 
-## 基础用法
+## Button 按钮
+常用的操作按钮
+
+### 基础用法
 
 :::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
 
@@ -51,7 +54,7 @@
 ```
 :::
 
-## Plain Button
+### Plain Button
 默认的`Default`主题，我们称之为朴素按钮(Plain Button)，你可以 hover 在样例上进行预览。
 
 :::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
@@ -65,7 +68,7 @@
 ```
 :::
 
-## 尺寸
+### 尺寸
 
 Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
 
@@ -79,7 +82,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 ```
 :::
 
-## Loading
+### Loading
 
 可以方便的处理 loading 状态，点击下面的按钮预览效果。
 
@@ -93,7 +96,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 ```
 :::
 
-## 图标按钮
+### 图标按钮
 
 带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
 
@@ -106,7 +109,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 ```
 :::
 
-## 按钮组
+### 按钮组
 
 如果你需要多个并列的按钮，按钮组可以帮你轻松的实现它。
 
@@ -127,7 +130,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 ```
 :::
 
-## Attributes
+### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | 尺寸   | string  |   large,small,mini            |         |
diff --git a/examples/docs/card.md b/examples/docs/card.md
index 0b92dc293..4ecd3a75d 100644
--- a/examples/docs/card.md
+++ b/examples/docs/card.md
@@ -42,8 +42,10 @@
     @utils-clearfix;
   }
 </style>
+## Card 卡片
+将信息聚合在卡片容器中展示
 
-## 基础用法
+### 基础用法
 
 
 下面是一个带有标题、内容和操作（按钮）的 Card 组件示例，需要注意的是，部分样式需要你自己填入。
@@ -62,7 +64,7 @@
 ```
 :::
 
-## 简单卡片
+### 简单卡片
 
 卡片可以只有内容区域。
 
@@ -76,7 +78,7 @@
 ```
 :::
 
-## 进阶使用
+### 进阶使用
 可以让你的卡片极大程度的被个性化，为更丰富的内容展示服务。
 
 下例是一个带图片的示例，能帮助你更好地理解`body-style`配合分发内容自定义样式的强大：
@@ -100,7 +102,7 @@
 ```
 :::
 
-## Attributes
+### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| | |
diff --git a/examples/docs/checkbox.md b/examples/docs/checkbox.md
index f868dcbc1..a4f04f82d 100644
--- a/examples/docs/checkbox.md
+++ b/examples/docs/checkbox.md
@@ -25,8 +25,10 @@
     }
   }
 </style>
+## Checkbox 多选框
+一组备选项中进行多选
 
-## 基础用法
+### 基础用法
 
 :::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。
 
@@ -46,7 +48,7 @@
 ```
 :::
 
-## 多选框组
+### 多选框组
 
 :::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可，`label`属性除了改变 checkbox 按钮后的介绍外，同时也是该 checkbox 对应的值，`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
 
@@ -76,7 +78,7 @@
 ```
 :::
 
-## 绑定 value 的多选框
+### 绑定 value 的多选框
 
 :::demo 使用`true-label`和`false-label`可以自定义选中时和未选中时的值，可以为`String`或`Number`类型。
 
@@ -104,7 +106,7 @@
 ```
 :::
 
-## Checkbox Attributes
+### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选中状态的值（只有在`checkbox-group`下有意义）   | string    |               |         |
@@ -112,7 +114,7 @@
 | false-label | 没有选中时的值   | string, number    |               |         |
 | disabled  | 按钮禁用    | boolean   |    | false   |
 
-## Checkbox-group Events
+### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change  | 当绑定值变化时触发的事件 | 选中的 Checkbox Label 值 |
diff --git a/examples/docs/dialog.md b/examples/docs/dialog.md
index c8f8d266f..164109638 100644
--- a/examples/docs/dialog.md
+++ b/examples/docs/dialog.md
@@ -63,8 +63,10 @@
     }
   }
 </style>
+## Dialog 对话框
+在保留当前页面状态的情况下，告知用户并承载相关操作
 
-## 基本用法
+### 基本用法
 
 Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只是弹出框，可以尝试 MessageBox 组件。
 
@@ -83,7 +85,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 ```
 :::
 
-## 设置尺寸
+### 设置尺寸
 
 :::demo 提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置。
 
@@ -108,7 +110,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 ```
 :::
 
-## 使用 Dialog 方法打开
+### 使用 Dialog 方法打开
 
 :::demo 使用实例`open`和`close`方法，不用显式改变`v-modal`的值。
 
@@ -137,7 +139,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 ```
 :::
 
-## 自定义内容
+### 自定义内容
 
 Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处。
 
@@ -177,7 +179,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
 ```
 :::
 
-## Attributes
+### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title     | Dialog 的标题 | string    |                                  |         |
@@ -187,13 +189,13 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
 | closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean    |  | true |
 | closeOnPressEscape | 是否可以通过按下 ESC 关闭 Dialog | boolean    |  | true |
 
-## Slot
+### Slot
 | name | 说明 |
 |------|--------|
 | - | Dialog 的内容 |
 | footer | Dialog 按钮操作区的内容 |
 
-## 方法
+### 方法
 每个`el-dialog`实例都暴露了如下方法，用于在不显式改变`v-model`值的情况下打开 / 关闭实例：
 | 方法名 | 说明 |
 |------|--------|
diff --git a/examples/docs/dropdown.md b/examples/docs/dropdown.md
index a883465ef..1227e4512 100644
--- a/examples/docs/dropdown.md
+++ b/examples/docs/dropdown.md
@@ -22,23 +22,15 @@
     }
   }
 </script>
+## Dropdown 下拉菜单
 
-## 基础用法
+将动作或菜单折叠到下拉菜单中。
 
-Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可生成对应的下拉菜单，通过`text`属性来设置按钮文字。
+### 基础用法
 
-默认条件下，他又一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。
+移动到下拉菜单上，展开更多操作。
 
-默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
-
-<div class="demo-box">
-  <el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
-  </el-dropdown>
-</div>
+:::demo 通过`text`属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
 
 ```html
 <el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
@@ -48,19 +40,11 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
   <el-dropdown-item>选项四</el-dropdown-item>
 </el-dropdown>
 ```
+:::
 
-## 不带独立按钮的下拉菜单
+### 不带独立按钮的下拉菜单
 
-如果不需要默认的主要按钮与下拉按钮的组合，可以通过设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，它接受一个`Boolean`，设置为`false`即可。
-
-在下例中，可以看到，在选项三和选项四中插入了一条分割线，要达成这个效果很简单，只需要在选项四中设置`class`为`divider`。
-
-<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
-  <el-dropdown-item>选项一</el-dropdown-item>
-  <el-dropdown-item>选项二</el-dropdown-item>
-  <el-dropdown-item>选项三</el-dropdown-item>
-  <el-dropdown-item class="divider">选项四</el-dropdown-item>
-</el-dropdown>
+:::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，设置为`false`即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置`class`为`divider`。
 
 ```html
 <el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
@@ -70,26 +54,11 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
   <el-dropdown-item class="divider">选项四</el-dropdown-item>
 </el-dropdown>
 ```
+:::
 
-## 通过点击触发下拉
-
-默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在`trigger`属性设置为`click`即可。
-
-<div class="demo-box">
-  <el-dropdown text="主要按钮" type="primary" trigger="click">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
-  </el-dropdown>
-  <el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-</div>
+### 通过点击触发下拉
 
+:::demo 在`trigger`属性设置为`click`即可。
 ```html
 <el-dropdown text="主要按钮" type="primary" trigger="click">
   <el-dropdown-item>选项一</el-dropdown-item>
@@ -104,20 +73,13 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
   <el-dropdown-item class="divider">选项四</el-dropdown-item>
 </el-dropdown>
 ```
+:::
 
-## 按钮样式
+### 按钮样式
 
 除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能：
 
-<div class="demo-box">
-  <el-dropdown text="下拉菜单" type="text" :icon-separate="false">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-</div>
-
+:::demo
 ```html
 <el-dropdown text="下拉菜单" type="text" :icon-separate="false">
   <el-dropdown-item>选项一</el-dropdown-item>
@@ -126,34 +88,9 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
   <li class="divider">选项四</el-dropdown-item>
 </el-dropdown>
 ```
+:::
 
-<div class="demo-box">
-  <el-dropdown text="下拉菜单" type="primary" size="large">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <li class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-  <el-dropdown text="下拉菜单" type="primary">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-  <el-dropdown text="下拉菜单" type="primary" size="small">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-  <el-dropdown text="下拉菜单" type="primary" size="mini">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-</div>
-
+:::demo
 ```html
 <el-dropdown text="下拉菜单" type="primary" size="large">
   <el-dropdown-item>选项一</el-dropdown-item>
@@ -180,44 +117,9 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
   <el-dropdown-item class="divider">选项四</el-dropdown-item>
 </el-dropdown>
 ```
+:::
 
-## 对齐方式
-
-下拉菜单的对齐方式有两种：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`：
-
-<div class="demo-box">
-  <el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-
-  <el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
-    <el-dropdown-item>选项一</el-dropdown-item>
-    <el-dropdown-item>选项二</el-dropdown-item>
-    <el-dropdown-item>选项三</el-dropdown-item>
-    <el-dropdown-item class="divider">选项四</el-dropdown-item>
-  </el-dropdown>
-</div>
-
-```html
-<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
-  <el-dropdown-item>选项一</el-dropdown-item>
-  <el-dropdown-item>选项二</el-dropdown-item>
-  <el-dropdown-item>选项三</el-dropdown-item>
-  <el-dropdown-item class="divider">选项四</el-dropdown-item>
-</el-dropdown>
-
-<el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
-  <el-dropdown-item>选项一</el-dropdown-item>
-  <el-dropdown-item>选项二</el-dropdown-item>
-  <el-dropdown-item>选项三</el-dropdown-item>
-  <el-dropdown-item class="divider">选项四</el-dropdown-item>
-</el-dropdown>
-```
-
-## Attributes
+### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | text          | 菜单按钮文本      | string          |                       |         |
diff --git a/examples/docs/icon.md b/examples/docs/icon.md
index 0007f931b..08611c1c2 100644
--- a/examples/docs/icon.md
+++ b/examples/docs/icon.md
@@ -48,7 +48,7 @@
     }
   }
 </style>
-## icon-font 图标
+## Icon 图标
 
 提供了一套常用的图标集合。
 
diff --git a/examples/docs/input-number.md b/examples/docs/input-number.md
index 5d0f732d5..642b497d7 100644
--- a/examples/docs/input-number.md
+++ b/examples/docs/input-number.md
@@ -16,8 +16,10 @@
     }
   }
 </style>
+## Input Number 数字输入框
+通过鼠标或键盘输入字符
 
-## 基础使用
+### 基础使用
 
 需要标准的数字值时可以用到 Input Number 组件，你提供了数值输入提供了范围控制和递增递减的步数控制。
 
@@ -41,7 +43,7 @@
 ```
 :::
 
-## 禁用状态
+### 禁用状态
 
 :::demo `disabled`属性接受一个`Boolean`，设置为`true`即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置`min`属性和`max`属性，不设置`min`和`max`时，最小值为 0。
 
@@ -51,7 +53,7 @@
 ```
 :::
 
-## 步长
+### 步长
 
 让组件按照步长来增减。
 
@@ -62,7 +64,7 @@
 ```
 :::
 
-## 尺寸
+### 尺寸
 
 和其他组件一样，Input Number 同样具有不同的尺寸。
 
@@ -75,7 +77,7 @@
 ```
 :::
 
-## Attributes
+### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |----------|-------------- |----------|--------------------------------  |-------- |
 | min      | 设置计数器允许的最小值 | number |   | 0 |
diff --git a/examples/docs/loading.md b/examples/docs/loading.md
index e4fd20968..006b5b033 100644
--- a/examples/docs/loading.md
+++ b/examples/docs/loading.md
@@ -62,8 +62,10 @@
     }
   }
 </script>
+## Loading 加载
+加载数据时显示动效
 
-## 基本用法
+### 基本用法
 
 :::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
 
@@ -76,7 +78,7 @@
 ```
 :::
 
-## 修饰符
+### 修饰符
 
 通过修饰符，我们可以使用全屏幕 Loading 或将 Loading 设置在 body 上。
 
diff --git a/examples/docs/message-box.md b/examples/docs/message-box.md
index 59eb27f31..500381d89 100644
--- a/examples/docs/message-box.md
+++ b/examples/docs/message-box.md
@@ -61,8 +61,10 @@
     }
   };
 </script>
+## Message box 信息提示
+模拟系统的消息提示框而实现的一套摸态对话框组件，用于消息提示、成功提示、错误提示、询问信息
 
-## 基本用法
+### 基本用法
 
 MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能：`$msgbox`，`$alert`，`$confirm`以及`$prompt`。
 
@@ -87,7 +89,7 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert
 ```
 :::
 
-## 配置项
+### 配置项
 
 MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。
 
@@ -209,11 +211,11 @@ Msgbox 框是最基本的弹框，与 Alert 的区别在于 Alert 无法通过 E
 ```
 :::
 
-## 全局方法
+### 全局方法
 
 Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。
 
-## 单独引用
+### 单独引用
 
 单独引入 `MessageBox`：
 
@@ -223,7 +225,7 @@ import { MessageBox } from 'element-ui';
 
 对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
 
-## Options
+### Options
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
diff --git a/examples/docs/pagination.md b/examples/docs/pagination.md
index 89e82b9c0..77db1f655 100644
--- a/examples/docs/pagination.md
+++ b/examples/docs/pagination.md
@@ -1,31 +1,23 @@
-## 基础用法
+## Pagination 分页
 
-Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，它代表页码的个数，之后我们还可以设置`layout`，代码需要显示的内容，用逗号分隔，布局元素会依次显示。
+当数据量过多时，使用分页分解数据
 
-下例中，`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
-
-<el-pagination
-  layout="prev, pager, next"
-  :total="1000">
-</el-pagination>
+### 基础用法
 
+:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
 ```html
 <el-pagination
   layout="prev, pager, next"
   :total="50">
 </el-pagination>
 ```
+:::
 
-## 小型分页
+### 小型分页
 
-在空间有限的情况下，可以使用简单的小型分页，只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
-
-<el-pagination
-  small
-  layout="prev, pager, next"
-  :total="50">
-</el-pagination>
+在空间有限的情况下，可以使用简单的小型分页。
 
+:::demo 只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
 ```html
 <el-pagination
   small
@@ -33,26 +25,11 @@ Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，
   :total="50">
 </el-pagination>
 ```
+:::
 
-## 附加功能
+### 附加功能
 
-此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。
-
-`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示100个，200个，300个或者400个。
-
-`page-size`接受一个`Number`，表示每页显示个数。
-
-`current-page`接受一个`Number`，表示当前页页码。
-
-<el-pagination
-  @sizechange="handleSizeChange"
-  @currentchange="handleCurrentChange"
-  :current-page="5"
-  :page-sizes="[100, 200, 300, 400]"
-  :page-size="100"
-  layout="sizes, prev, pager, next, jumper, total"
-  :total="1000">
-</el-pagination>
+:::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示100个，200个，300个或者400个。
 
 ```html
 <template>
@@ -79,21 +56,9 @@ Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，
   }
 </script>
 ```
+:::
 
-<script>
-  module.exports = {
-    methods: {
-      handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-      },
-      handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-      }
-    }
-  }
-</script>
-
-## Attributes
+### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | small              |   是否使用小型分页样式     | Boolean |             | false |
@@ -103,7 +68,7 @@ Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，
 | layout | 组件布局，子组件名用逗号分隔。| String | `size`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | |  [10, 20, 30, 40, 50, 100] |
 
-## Events
+### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
 | sizechange | pageSize 改变时会触发 | 每页条数`size` |
diff --git a/examples/docs/popover.md b/examples/docs/popover.md
index 047b0f2f9..27b63bb2a 100644
--- a/examples/docs/popover.md
+++ b/examples/docs/popover.md
@@ -113,48 +113,12 @@
   }
 </style>
 
-## 基础用法
+## Popover 弹出框
+
+### 基础用法
 Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
 
-要使用它，必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。
-
-`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`，下面是样例，一些没有做解释的属性是与 Tooltip 一致的。
-
-<div class="demo-box demo-popover">
-  <el-popover
-    ref="popover1"
-    placement="top-start"
-    title="标题"
-    width="200"
-    trigger="hover"
-    content="这是一段容,这是一段容,这是一段容,这是一段容。">
-  </el-popover>
-
-  <el-popover
-    ref="popover2"
-    placement="bottom"
-    title="标题"
-    width="200"
-    trigger="click"
-    content="这是一段容,这是一段容,这是一段容,这是一段容。">
-  </el-popover>
-
-  <el-popover
-    ref="popover3"
-    placement="right"
-    title="标题"
-    width="200"
-    trigger="focus"
-    content="这是一段容,这是一段容,这是一段容,这是一段容。">
-  </el-popover>
-
-  <el-button v-popover:popover1>hover 激活</el-button>
-  <el-button v-popover:popover2>click 激活</el-button>
-
-  <el-input v-model="model" v-popover:popover3 placeholder="focus 激活"></el-input>
-</div>
-
-
+:::demo 必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。
 ```html
 <el-popover
   ref="popover1"
@@ -187,27 +151,13 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 <el-button v-popover:popover2>click 激活</el-button>
 <el-button v-popover:popover3>focus 激活</el-button>
 ```
+:::
 
-## 嵌套信息
+### 嵌套信息
 
-和其他组件一样，Popover 组件也可以利用分发取代`content`属性，下面我们嵌套了一个表格：
-
-<div class="demo-box demo-popover">
-  <el-popover
-    ref="popover4"
-    placement="right"
-    width="400"
-    trigger="click">
-    <el-table :data="gridData">
-      <el-table-column width="150" property="date" label="日期"></el-table-column>
-      <el-table-column width="100" property="name" label="姓名"></el-table-column>
-      <el-table-column width="300" property="address" label="地址"></el-table-column>
-    </el-table>
-  </el-popover>
-
-  <el-button v-popover:popover4>click 激活</el-button>
-</div>
+嵌套表格的例子：
 
+:::demo 利用分发取代`content`属性
 ```html
 <el-popover
   ref="popover4"
@@ -223,28 +173,13 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 
 <el-button v-popover:popover4>click 激活</el-button>
 ```
+:::
 
-
-## 嵌套操作
+### 嵌套操作
 
 当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
 
-<div class="demo-box demo-popover">
-  <el-popover
-    ref="popover5"
-    placement="top"
-    width="160"
-    :visible.sync="visible2">
-    <p>这是一段内容这是一段内容确定删除吗？</p>
-    <div style="text-align: right; margin: 0">
-      <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
-      <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
-    </div>
-  </el-popover>
-
-  <el-button v-popover:popover5>删除</el-button>
-</div>
-
+:::demo
 ```html
 <el-popover
   ref="popover5"
@@ -260,8 +195,9 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 
 <el-button v-popover:popover5>删除</el-button>
 ```
+:::
 
-## API
+### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | trigger | 触发方式 | String  | 'click', 'focus', 'hover' |    click    |
@@ -275,7 +211,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean |  | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 
-## Slot
+### Slot
 | 参数               | 说明                                                     |
 |--- | ---|
 | - | Popover内嵌HTML文本 |
diff --git a/examples/docs/progress.md b/examples/docs/progress.md
index 00125b482..8a103c4e9 100644
--- a/examples/docs/progress.md
+++ b/examples/docs/progress.md
@@ -6,25 +6,12 @@
   }
 </style>
 
-## 基础使用
+## Progress 进度条
+用于展示操作进度，告知用户当前状态和预期
 
-Progress 组件设置`percentage`属性即可，它接受`Number`类型，表示进度条对应的百分比，**必填**，必须在 0-100。
+### 基础使用
 
-`type`属性决定了进度条的样式，提供四种：`green`，`green-stripe`，`blue`，`blue-stripe`，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。
-
-`size`属性决定了进度条的大小，可以设置：`large`、`small`或不设置。
-
-下面是样例：
-
-<div class="demo-box demo-progress">
-  <el-progress :percentage="50"></el-progress>
-  <el-progress :percentage="50" size="large"></el-progress>
-  <el-progress :percentage="50" size="small"></el-progress>
-  <el-progress :percentage="50" type="green"></el-progress>
-  <el-progress :percentage="50" type="blue"></el-progress>
-  <el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
-  <el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
-</div>
+:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。`type`属性决定了进度条的样式，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。`size`属性决定了进度条的大小。
 
 ```html
 <el-progress :percentage="50"></el-progress>
@@ -35,8 +22,9 @@ Progress 组件设置`percentage`属性即可，它接受`Number`类型，表示
 <el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
 <el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
 ```
+:::
 
-## Attributes
+### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | **percentage** | **百分比（必填）**   | number          |     0-100          |     0    |
diff --git a/examples/docs/radio.md b/examples/docs/radio.md
index 48652a050..48c3bb0c5 100644
--- a/examples/docs/radio.md
+++ b/examples/docs/radio.md
@@ -13,23 +13,23 @@
   };
 </script>
 
-## 基本用法
+## Radio 单选框
 
-要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
+在一组备选项中进行单选
 
-<div class="demo-box demo-radio">
-  <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
-  <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
-  <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
-</div>
+### 基本用法
 
-{{radio}}
+选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
+
+:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
 
 ```html
 <template>
   <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
   <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
   <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
+
+  {{radio}}
 </template>
 
 <script>
@@ -42,18 +42,11 @@
   }
 </script>
 ```
+:::
 
-## Radio Group
+### Radio Group
 
-结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
-
-<div class="demo-box demo-radio">
-  <el-radio-group v-model="radio2">
-    <el-radio :label="9"></el-radio>
-    <el-radio :label="6"></el-radio>
-    <el-radio :label="3"></el-radio>
-  </el-radio-group>
-</div>
+:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
 
 ```html
 <el-radio-group v-model="radio2">
@@ -62,36 +55,13 @@
   <el-radio :label="3"></el-radio>
 </el-radio-group>
 ```
+:::
 
-## Radio Group Button
+### Radio Group Button
 
-还有一种特殊的单选按钮组，只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
-
-<div class="demo">
-  <el-radio-group v-model="radio31" size="large">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州" :disabled="true"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
-</div>
-<div class="demo">
-  <el-radio-group v-model="radio32">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州" :disabled="true"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
-</div>
-<div class="demo">
-  <el-radio-group v-model="radio33" size="small">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州" :disabled="true"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
-</div>
+一种特殊的单选按钮组。
 
+:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
 ```html
 <el-radio-group v-model="radio31" size="large">
   <el-radio-button label="上海"></el-radio-button>
@@ -112,18 +82,15 @@
   <el-radio-button label="深圳"></el-radio-button>
 </el-radio-group>
 ```
+:::
 
-## 禁用
+### 禁用
 
-只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
+单选框不可用的状态。
 
 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。
 
-<div class="demo-box demo-radio">
-  <el-radio disabled v-model="radio" label="禁用"></el-radio>
-  <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
-</div>
-
+:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
 ```html
 <template>
   <el-radio disabled v-model="radio" label="禁用"></el-radio>
@@ -141,25 +108,25 @@
   }
 </script>
 ```
+:::
 
-
-## Radio Attributes
+### Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | Radio 的 value   | string,number    |               |         |
 | disabled  | 是否禁用    | boolean   |   | false   |
 
-## Radio-group Attributes
+### Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | Radio 按钮组尺寸   | string  | large, small  |         |
 
-## Radio-group Events
+### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
 | change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
 
-## Radio-button Attributes
+### Radio-button Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | Radio 的 value  | string,number  |               |         |
diff --git a/examples/docs/steps.md b/examples/docs/steps.md
index f0b5d13de..24410f91e 100644
--- a/examples/docs/steps.md
+++ b/examples/docs/steps.md
@@ -1,37 +1,11 @@
-## 基础步骤条
+## Steps 步骤条
+引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步
 
-Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。
-
-需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。
-
-设置`finish-status`属性可以改变已经完成的步骤的状态，而`process-status`可以改变当前步骤的状态，Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
+### 基础步骤条
 
 下两例分别展示了定宽的步骤条和自适应的步骤条：
 
-<el-steps :space="100" :active="active" finish-status="success">
-  <el-step title="步骤 1"></el-step>
-  <el-step title="步骤 2"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
-
-<el-button @click.native="next">下一步</el-button>
-
-<script>
-  export default {
-    data() {
-      return {
-        active: 0
-      };
-    },
-
-    methods: {
-      next() {
-        if (this.active++ > 2) this.active = 0;
-      }
-    }
-  }
-</script>
-
+:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
 ```html
 <el-steps :space="100" :active="active" finish-status="success">
   <el-step title="步骤 1"></el-step>
@@ -57,13 +31,9 @@ Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的
   }
 </script>
 ```
+:::
 
-<el-steps :active="1" process-status="error">
-  <el-step title="步骤 1"></el-step>
-  <el-step title="步骤 2"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
-
+:::demo Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
 ```html
 <el-steps :active="1" process-status="error">
   <el-step title="步骤 1"></el-step>
@@ -71,17 +41,13 @@ Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的
   <el-step title="步骤 3"></el-step>
 </el-steps>
 ```
+:::
 
-## 状态与描述
+### 状态与描述
 
-Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每一个步骤的标题（或状态）。使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
-
-<el-steps :space="100" :active="1" finish-status="success">
-  <el-step title="已完成"></el-step>
-  <el-step title="进行中"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
+Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 
+:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
 ```html
 <el-steps :space="100" :active="1" finish-status="success">
   <el-step title="已完成"></el-step>
@@ -89,15 +55,11 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
   <el-step title="步骤 3"></el-step>
 </el-steps>
 ```
+:::
 
 除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
 
-<el-steps :space="200" :active="1">
-  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
-  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
-  <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
-</el-steps>
-
+:::demo
 ```html
 <el-steps :space="200" :active="1">
   <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
@@ -105,17 +67,11 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
   <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
 </el-steps>
 ```
+:::
 
-## 带图标的步骤条
-
-除了`title`和`description`，还可以通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
-
-<el-steps :space="100" :active="1">
-  <el-step title="步骤 1" icon="edit"></el-step>
-  <el-step title="步骤 2" icon="upload"></el-step>
-  <el-step title="步骤 3" icon="picture"></el-step>
-</el-steps>
+### 带图标的步骤条
 
+:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
 ```html
 <el-steps :space="100" :active="1">
   <el-step title="步骤 1" icon="edit"></el-step>
@@ -123,17 +79,13 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
   <el-step title="步骤 3" icon="picture"></el-step>
 </el-steps>
 ```
+:::
 
-## 竖式步骤条
+### 竖式步骤条
 
-默认情况下，步骤条为横向显示，如果需要竖向显示的步骤条，只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
-
-<el-steps :space="100" direction="vertical" :active="1">
-  <el-step title="步骤 1"></el-step>
-  <el-step title="步骤 2"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
+默认情况下，步骤条为横向显示，也可以显示竖向显示的步骤条。
 
+:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
 ```html
 <el-steps :space="100" direction="vertical" :active="1">
   <el-step title="步骤 1"></el-step>
@@ -141,8 +93,7 @@ Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每
   <el-step title="步骤 3"></el-step>
 </el-steps>
 ```
-
-## API
+:::
 
 ### Steps Attributes
 
diff --git a/examples/docs/table.md b/examples/docs/table.md
index 0239f493e..65b950ab0 100644
--- a/examples/docs/table.md
+++ b/examples/docs/table.md
@@ -129,7 +129,7 @@
       </el-table-column>
     </el-table>
   </template>
-  
+
   <script>
     export default {
       data() {
@@ -291,7 +291,7 @@
       width="120">
     </el-table-column>
     <el-table-column
-      property="address" 
+      property="address"
       label="地址">
     </el-table-column>
   </el-table>
@@ -334,7 +334,7 @@
 :::demo 只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码。
 ```html
 <template>
-  <el-table 
+  <el-table
     :data="tableData3"
     height="250"
     border
@@ -769,4 +769,3 @@
 | formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | - | - |
 | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | - | false |
 | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，通过 _self 获取当前上下文。此时不需要配置 property 属性  | - | - |
-
diff --git a/examples/docs/tabs.md b/examples/docs/tabs.md
index edf12c4ff..4693bb2cb 100644
--- a/examples/docs/tabs.md
+++ b/examples/docs/tabs.md
@@ -34,8 +34,10 @@
     margin-bottom: 30px;
   }
 </style>
+## Tabs 标签页
+分隔内容上有关联但属于不同类别的数据集合
 
-## 基础使用
+### 基础使用
 
 :::demo Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
 
@@ -60,7 +62,7 @@
 ```
 :::
 
-## 多种风格
+### 多种风格
 
 除了上例中的风格外，我们还提供了标签和卡片两种风格。
 
@@ -82,7 +84,7 @@
 ```
 :::
 
-## 可关闭的标签
+### 可关闭的标签
 
 :::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
 
@@ -110,20 +112,20 @@
 ```
 :::
 
-## Tabs Attributes
+### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | type     | 风格类型   | string   | card, border-card  |         |
 | closable  | 标签是否可关闭   | boolean   | true, false |  false  |
 | active-name  | 选中选项卡的 name  | string   |    |    |
 
-## Tabs Events
+### Tabs Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
 | tab-click  | tab 被选中的钩子 | 被选中的标签 tab |
 | tab-remove  | tab 被删除的钩子  | 被删除的标签 tab |
 
-## Tab-pane Attributes
+### Tab-pane Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   |  |         |
diff --git a/examples/docs/tag.md b/examples/docs/tag.md
index 04f72723c..94adcb103 100644
--- a/examples/docs/tag.md
+++ b/examples/docs/tag.md
@@ -28,7 +28,10 @@
   }
 </style>
 
-## 基础使用
+## Tag 标签
+用于标记和选择
+
+### 基础使用
 
 Tag 组件提供了六种主题。
 
@@ -44,7 +47,7 @@ Tag 组件提供了六种主题。
 ```
 :::
 
-## 描边
+### 描边
 
 借此可以定义 hover 时的效果。
 
@@ -54,7 +57,7 @@ Tag 组件提供了六种主题。
 ```
 :::
 
-## 可移除的标签
+### 可移除的标签
 
 :::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。
 
@@ -94,7 +97,7 @@ Tag 组件提供了六种主题。
 ```
 :::
 
-## Attributes
+### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'error' |  |
@@ -103,7 +106,7 @@ Tag 组件提供了六种主题。
 | hit | 是否有边框描边 | boolean | | false |
 
 
-## Events
+### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
 | close | 关闭tag时触发的事件 |  |
diff --git a/examples/docs/tooltip.md b/examples/docs/tooltip.md
index d5760725d..f0732566a 100644
--- a/examples/docs/tooltip.md
+++ b/examples/docs/tooltip.md
@@ -7,24 +7,17 @@
     }
   };
 </script>
-## 基础用法
+## Tooltips 文字提示
+
+### 基础用法
 
 Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们提供9种不同的展示方式。
 
-使用`content`属性来决定`hover`时的提示信息。
+下面是完整的九个示例，可以通过该示例来理解，选择你要的效果：
 
-由`placement`属性决定展示效果：
-
-`placement`属性值为：`方向-箭头方位`
-
-四个方向：`top`、`left`、`right`、`bottom`
-
-三种箭头方位：`start`, `end`，默认为空
-
-如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
-
-下面是完整的九个示例，可以通过该示例来理解上面的说明，选择你要的效果：
+:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-箭头方位`；四个方向：`top`、`left`、`right`、`bottom`；三种箭头方位：`start`, `end`，默认为空。如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
 
+```html
 <style>
   .box {
     width: 400px;
@@ -101,24 +94,15 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
     </el-tooltip>
   </div>
 </div>
+```
+:::
 
-## 主题
+### 主题
 
-Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过设置`effect`属性来改变主题，默认为`dark`。
-
-<div>
-  <el-tooltip content="Top center" placement="top">
-    <el-button>Top center</el-button>
-  </el-tooltip>
-</div>
+Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 
 
-<div>
-  <el-tooltip content="Bottom center" placement="bottom" effect="light">
-    <el-button>Bottom center</el-button>
-  </el-tooltip>
-</div>
-
+:::demo 通过设置`effect`属性来改变主题，默认为`dark`。
 ```html
 <el-tooltip content="Top center" placement="top">
   <el-button>Dark</el-button>
@@ -127,26 +111,22 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
   <el-button>Light</el-button>
 </el-tooltip>
 ```
+:::
 
-## 更多Content
+### 更多Content
 
-如果需要展示多行文本或者是设置文本内容的格式，我们可以考虑用具名 slot 分发`content`，替代`tooltip`中的`content`属性：
-
-<div>
-  <el-tooltip placement="top">
-    <div slot="content">多行信息<br/>第二行信息</div>
-    <el-button>Top center</el-button>
-  </el-tooltip>
-</div>
+展示多行文本或者是设置文本内容的格式
 
+:::demo 用具名 slot 分发`content`，替代`tooltip`中的`content`属性。
 ```html
 <el-tooltip placement="top">
   <div slot="content">多行信息<br/>第二行信息</div>
   <el-button>Top center</el-button>
 </el-tooltip>
 ```
+:::
 
-## 高级扩展
+### 高级扩展
 
 除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
 
@@ -158,25 +138,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
 
 当然，Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
 
-<style>
-  .slide-fade-enter-active {
-    transition: all .3s ease;
-  }
-  .slide-fade-leave-active {
-    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
-  }
-  .slide-fade-enter, .expand-fade-leave-active {
-    margin-left: 20px;
-    opacity: 0;
-  }
-</style>
-
-<div>
-  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
-    <el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
-  </el-tooltip>
-</div>
-
+:::demo
 ```html
 <template>
   <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
@@ -197,8 +159,9 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
   }
 </style>
 ```
+:::
 
-## Attributes
+### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 |  effect        |  默认提供的主题  | String            | `dark`, `light`  | dark  |
@@ -211,4 +174,3 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean |  | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | openDelay | 延迟出现，单位毫秒 | Number | | 0 |
-
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index e7f08492b..6ee1b7732 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -373,11 +373,14 @@
         this.$calcHeight(value);
       },
 
-      data(val) {
-        if (val && this.selectionMode === 'multiple') {
-          this.tableData = val.map(item => objectAssign({ '$selected': false }, item));
-        } else {
-          this.tableData = val;
+      data: {
+        immediate: true,
+        handler(val) {
+          if (val && this.selectionMode === 'multiple') {
+            this.tableData = val.map(item => objectAssign({ '$selected': false }, item));
+          } else {
+            this.tableData = val;
+          }
         }
       },