finish nav and data docs except tree

examples/docs/dropdown.md

@@ -73,7 +73,7 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
 
 ## 通过点击触发下拉
 
-默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成click，只要在`trigger`属性设置为`click`即可。
+默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在`trigger`属性设置为`click`即可。
 
 <div class="demo-box">
   <el-dropdown text="主要按钮" type="primary" trigger="click">
@@ -183,7 +183,7 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可
 
 ## 对齐方式
 
-Element 提供两种下拉菜单的对齐方式：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`：
+下拉菜单的对齐方式有两种：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`：
 
 <div class="demo-box">
   <el-dropdown text="下拉菜单 end" type="primary" menu-align="end">

examples/docs/steps.md

-##  基础用法
-简单的步骤条。
+## 基础步骤条
 
-### 定宽步骤条
+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>
@@ -53,24 +58,23 @@
 </script>
 ```
 
-### 自适应步骤条
-
-<el-steps :active="1">
+<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>
 
 ```html
-<el-steps :active="1">
+<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>
 ```
 
-## 含状态步骤
-每一步骤显示出该步骤的状态。
+## 状态与描述
+
+Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每一个步骤的标题（或状态）。使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
 
 <el-steps :space="100" :active="1" finish-status="success">
   <el-step title="已完成"></el-step>
@@ -86,8 +90,7 @@
 </el-steps>
 ```
 
-## 有描述的步骤条
-每个步骤有其对应的步骤状态描述。
+除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
 
 <el-steps :space="200" :active="1">
   <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
@@ -104,7 +107,8 @@
 ```
 
 ## 带图标的步骤条
-步骤条内可以启用各种自定义的图标。
+
+除了`title`和`description`，还可以通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
 
 <el-steps :space="100" :active="1">
   <el-step title="步骤 1" icon="edit"></el-step>
@@ -121,7 +125,8 @@
 ```
 
 ## 竖式步骤条
-竖直方向的步骤条。
+
+默认情况下，步骤条为横向显示，如果需要竖向显示的步骤条，只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
 
 <el-steps :space="100" direction="vertical" :active="1">
   <el-step title="步骤 1"></el-step>
@@ -137,47 +142,28 @@
 </el-steps>
 ```
 
-## 步骤错误提示
-每一步骤显示出该步骤的状态。
-
-<el-steps :space="100" :active="1" finish-status="success" process-status="error">
-  <el-step title="已完成"></el-step>
-  <el-step title="审核失败"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
-
-```html
-<el-steps :space="100" :active="1" finish-status="success" process-status="error">
-  <el-step title="已完成"></el-step>
-  <el-step title="审核失败"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
-```
-
 ## API
 
-### Steps.props
+### Steps Attributes
 
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | space | 每个 step 的间距，不填写将自适应间距 | Number | | |
-| 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` |
+| 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' |
 
-### Step.props
+### Step Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| title | 标题 | String | | |
-| description | 描述性文字 | String | | |
-| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | String | |
+| title | 标题 | string | | |
+| description | 描述性文字 | string | | |
+| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | |
 
-
-### Step.slot
+### Step Slot
 | name | 说明  |
 |----|----|
 | icon | 图标 |
 | title | 标题 |
 | description | 描述性文字 |
-

examples/docs/tabs.md

@@ -39,7 +39,7 @@
 
 Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。
 
-在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`……。
+在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。
 
 下例会选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
 
@@ -119,7 +119,7 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
 除此以外，我们在`el-tabs`中准备了两个钩子，用于在 Tab 被选中时和被删除时自定义属性：`on-click`和`on-remove`，接受`Function`，它们都提供一个参数`tab`，为操作的目标标签。
 
 <div>
-  <el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
+  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -156,10 +156,14 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
 | type     | 风格类型   | string   | card, border-card  |         |
 | closable  | 标签是否可关闭   | boolean   | true, false |  false  |
 | active-name  | 选中选项卡的 name  | string   |    |    |
-| on-click  | tab 被选中的钩子(提供一个参数tab)  | function | |    |
-| on-remove  | tab 被删除的钩子(提供一个参数tab)  | function |   |
 
-## TAB-PANE Attributes
+## Tabs Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| tab-click  | tab 被选中的钩子 | 被选中的标签 tab |
+| tab-remove  | tab 被删除的钩子  | 被删除的标签 tab |
+
+## Tab-pane Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   |  |         |

examples/docs/tree.md

@@ -58,6 +58,7 @@
       },
 
       loadNode(node, resolve) {
+        console.log(node);
         if (node.level === -1) {
           return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
         }