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

@@ -1,7 +1,12 @@
-##  基础用法
-简单的步骤条。
+## 基础步骤条
 
-### 定宽步骤条
+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/table.md

@@ -87,6 +87,10 @@
 
       handleMultipleSelectionChange(val) {
         this.multipleSelection = val;
+      },
+
+      formatter(row, column) {
+        return row.address;
       }
     },
 
@@ -104,6 +108,10 @@
 
 ## 基础表格
 
+在 Table 组件中，只要在`el-table`元素中注入`data`对象数组后在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。
+
+在下例中，我们还用了`width`属性来定义列宽：
+
 <el-table :data="tableData" style="width: 520px">
   <el-table-column property="date" label="日期" width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
@@ -148,6 +156,8 @@
 
 ## 带斑马纹表格
 
+`stripe`属性可以创建带斑马纹的表格，效果如下例，它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
+
 <el-table :data="tableData" stripe style="width: 520px">
   <el-table-column property="date" label="日期" width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
@@ -192,6 +202,8 @@
 
 ## 带边框表格
 
+默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。
+
 <el-table :data="tableData" border style="width: 520px">
   <el-table-column property="date" label="日期" width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
@@ -236,6 +248,8 @@
 
 ## 带状态表格
 
+通过在`data`对象数组中加入字段，可以给行加上状态，Element 提供了四种状态：`$positive`、`$info`、`$warning`以及`$negative`，在对象新增字段中把状态设为`true`表示启用该状态。
+
 <el-table :data="tableData2" style="width: 520px">
   <el-table-column property="date" label="日期" width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
@@ -282,6 +296,8 @@
 
 ## 固定表头
 
+只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码，下例是一个固定表头的表格：
+
 <el-table :data="tableData3" height="250" border style="width: 520px">
   <el-table-column property="date" label="日期" width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
@@ -337,6 +353,8 @@
 ```
 
 ## 固定列
+除了固定头以外，固定列也十分方便，只需要使用`fixed-column-count`属性即可，它接受一个`Number`，表示左起要固定的列数，下例展示了如何使用：
+
 <el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
   <el-table-column property="date" label="日期" width="150"></el-table-column>
   <el-table-column property="name" label="姓名" width="300"></el-table-column>
@@ -380,6 +398,9 @@
 ```
 
 ## 固定列和表头
+
+固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可，下例是一个联用的样例：
+
 <el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
   <el-table-column property="date" label="日期" width="150"></el-table-column>
   <el-table-column property="name" label="姓名" width="300"></el-table-column>
@@ -436,7 +457,16 @@
 
 ## 单选
 
+更方便的是，Table 组件默认提供了选择的支持，只需要配置`selection-mode`属性即可实现单选（`single`）、多选（`multiple`)，如果不需要则设置为`none`即可。
+
+之后由`selectionchange`事件来管理选中时触发的事件，它会传入一个`value`，`value`为生成表格时的对应对象。
+
+在下例中还使用了`allow-no-selection`属性，它接受一个`Boolean`，为`true`，则允许为空，默认为`false`，此时将会产生默认值，为填入数组的第一个对象。
+
+如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。
+
 <el-table :data="tableData" selection-mode="single" @selectionchange="handleSelectionChange" style="width: 520px" allow-no-selection>
+  <el-table-column type="index" width="50"></el-table-column>
   <el-table-column property="date" label="日期" width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
   <el-table-column property="address" label="地址"></el-table-column>
@@ -488,25 +518,33 @@
 
 ## 多选
 
+除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`的事件中，我们提供的参数从对象变成了对象数组。
+
+此外，需要提供一个栏目来显示多选框，手动添加一列，设`type`属性为`selection`即可。
+
+在下例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`属性，设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置。
+
+而如果设置了宽度，默认情况无法完整显示的内容会被隐藏，可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时当 hover 在指定内容上就会显示完整内容。
+
 <el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
   <el-table-column type="selection" width="50"></el-table-column>
-  <el-table-column inline-template property="date" label="日期" width="120">
+  <el-table-column inline-template label="日期" width="120">
     <div>{{ row.date }}</div>
   </el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
+  <el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
 </el-table>
 <p>{{ multipleSelection }}</p>
 
 ```html
 <template>
-  <el-table :data="tableData3" selection-mode="multiple" @selectionchange="handleSelectionChange">
+  <el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
     <el-table-column type="selection" width="50"></el-table-column>
-    <el-table-column inline-template property="date" label="日期" width="120">
+    <el-table-column inline-template label="日期" width="120">
       <div>{{ row.date }}</div>
     </el-table-column>
     <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
+    <el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
   </el-table>
 </template>
 
@@ -558,10 +596,14 @@
 
 ## 排序
 
+Table 组件中，只要在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。
+
+在下例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
+
 <el-table :data="tableData" border style="width: 520px">
   <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
   <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
+  <el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
 </el-table>
 
 ```html
@@ -569,7 +611,7 @@
   <el-table :data="tableData" border style="width: 520px">
     <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
     <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
+    <el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
   </el-table>
 </template>
 
@@ -595,23 +637,28 @@
           address: '上海市普陀区金沙江路 1516 弄'
         }]
       }
+    },
+    methods: {
+      formatter(row, column) {
+        return row.address;
+      }
     }
   }
 </script>
 ```
 
-## el-table API
+## Table Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | | |
 | height | table 的高度，默认高度为空，即自动高度 | string | | '' |
 | stripe | 是否为斑马纹 table | boolean | | false |
 | border | 是否带有纵向边框 | boolean | | false |
-| selectionMode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
-| allowNoSelection | 单选模式是否允许选项为空 | boolean | | false |
-| fixedColumnCount | 固定列的个数 | number | | 0 |
+| selection-mode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
+| allow-no-selection | 单选模式是否允许选项为空 | boolean | | false |
+| fixed-column-count | 固定列的个数 | number | | 0 |
 
-## el-table 事件
+## Table Events
 | 事件名 | 说明 | 参数 |
 | ---- | ---- | ---- |
 | selectionchange | 当选择项发生变化时会触发该事件 | selected |
@@ -619,7 +666,7 @@
 | cellmouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cellclick | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
 
-## el-table-column API
+## Table-column Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | label | 显示的标题 | string | | '' |
@@ -630,4 +677,3 @@
 | formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | |  |
 | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | | false |
 | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。此时不需要配置 property 属性  | | |
-

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' }]);
         }