Merge pull request #89 from csvwolf/next

edit dropdown/message/tab docs

examples/docs/dropdown.md

@@ -25,7 +25,11 @@
 
 ## 基础用法
 
-<p>通过与 button 一致的 type 属性来指定菜单按钮类型。</p>
+Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可生成对应的下拉菜单，通过`text`属性来设置按钮文字。
+
+默认条件下，他又一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。
+
+默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
 
 <div class="demo-box">
   <el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
@@ -47,7 +51,9 @@
 
 ## 不带独立按钮的下拉菜单
 
-可以通过将`icon-separate`属性设为`false`来呈现不带独立按钮的下拉菜单。
+如果不需要默认的主要按钮与下拉按钮的组合，可以通过设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，它接受一个`Boolean`，设置为`false`即可。
+
+在下例中，可以看到，在选项三和选项四中插入了一条分割线，要达成这个效果很简单，只需要在选项四中设置`class`为`divider`。
 
 <el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
   <el-dropdown-item>选项一</el-dropdown-item>
@@ -67,6 +73,8 @@
 
 ## 通过点击触发下拉
 
+默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在`trigger`属性设置为`click`即可。
+
 <div class="demo-box">
   <el-dropdown text="主要按钮" type="primary" trigger="click">
     <el-dropdown-item>选项一</el-dropdown-item>
@@ -97,7 +105,9 @@
 </el-dropdown>
 ```
 
-## 文字类型下拉菜单
+## 按钮样式
+
+除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能：
 
 <div class="demo-box">
   <el-dropdown text="下拉菜单" type="text" :icon-separate="false">
@@ -117,25 +127,26 @@
 </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>
+  <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>
+  <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>
+  <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>
@@ -145,6 +156,60 @@
 
 ```html
 <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>
+```
+
+## 对齐方式
+
+下拉菜单的对齐方式有两种：`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>
@@ -152,12 +217,12 @@
 </el-dropdown>
 ```
 
-## API
+## Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | text          | 菜单按钮文本      | string          |                       |         |
-| type          | 菜单按钮类型，同 button    | string  |                       |         |
+| type          | 菜单按钮类型，同 Button 组件   | string  |                       |         |
 | trigger       | 触发下拉菜单的方式    | string  |    hover,click  |  hover |
-| icon-separate | 独立的下拉菜单按钮 | boolean         | true, false           | false   |
-| size          | 菜单按钮尺寸，同 button     | string          | large, small, mini  |     |
+| icon-separate | 独立的下拉菜单按钮 | boolean         |            | false   |
+| size          | 菜单按钮尺寸，同 Button 组件     | string          | large, small, mini  |     |
 | menu-align    | 菜单水平对齐方向     | string          | start, end  | end |

examples/docs/message.md

@@ -31,22 +31,22 @@
       open5() {
         this.$message({
           showClose: true,
-          message: '恭喜你，这是一条成功消息'
+          message: '这是一条消息提示'
         });
       },
 
       open6() {
         this.$message({
           showClose: true,
-          message: '警告哦，这是一条警告消息',
-          type: 'warning'
+          message: '恭喜你，这是一条成功消息',
+          type: 'success'
         });
       },
 
       open7() {
         this.$message({
           showClose: true,
-          message: '错了哦，这是一条错误消息',
+          message: '警告哦，这是一条警告消息',
           type: 'warning'
         });
       },

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

@@ -15,7 +15,7 @@
           title: '选项卡四',
           content: '选项卡四内容'
         }],
-        activeName: '3',
+        activeName: 'two',
         activeName2: ''
       }
     },
@@ -37,25 +37,44 @@
 
 ## 基础使用
 
+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`，可以达成相同效果。
+
 <div>
   <el-tabs :active-name="activeName">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+    <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
     <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
   </el-tabs>
 </div>
 
 ```html
-<el-tabs :active-name="activeName">
-  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-</el-tabs>
+<template>
+  <el-tabs :active-name="activeName">
+    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+    <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
+    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'two'
+      };
+    }
+  };
+</script>
 ```
 
-## 标签风格
+## 多种风格
+
+除了上例中的风格外，我们还提供了标签和卡片两种风格，只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。
 
 <div>
   <el-tabs type="card">
@@ -75,8 +94,6 @@
 </el-tabs>
 ```
 
-## 可关闭的标签
-
 <div>
   <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
@@ -85,7 +102,6 @@
     <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
   </el-tabs>
 </div>
-{{activeName2}}
 
 ```html
 <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
@@ -96,10 +112,14 @@
 </el-tabs>
 ```
 
-## 卡片风格
+## 可关闭的标签
+
+在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
+
+除此以外，我们在`el-tabs`中准备了两个钩子，用于在 Tab 被选中时和被删除时自定义属性：`on-click`和`on-remove`，接受`Function`，它们都提供一个参数`tab`，为操作的目标标签。
 
 <div>
-  <el-tabs type="border-card">
+  <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>
@@ -108,25 +128,43 @@
 </div>
 
 ```html
-<el-tabs type="border-card">
-  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-</el-tabs>
+<template>
+  <el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
+    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
+    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
+    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
+    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    methods: {
+      handleRemove(tab) {
+        console.log(tab);
+      },
+      handleClick(tab) {
+        console.log(tab);
+      }
+    }
+  };
+</script>
 ```
 
-## TABS API
+## Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | type     | 风格类型   | string   | card, border-card  |         |
-| closable  | 真实值   | boolean   | true, false |  false  |
-| activeName  | 当前选中面板的 name  | string   |    |    |
-| tab-click  | tab 被点击的钩子  | string   |    |    |
-| tab-remove  | tab 被删除的钩子  | string   |    |    |
+| closable  | 标签是否可关闭   | boolean   | true, false |  false  |
+| active-name  | 选中选项卡的 name  | string   |    |    |
+
+## Tabs Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| tab-click  | tab 被选中的钩子 | 被选中的标签 tab |
+| tab-remove  | tab 被删除的钩子  | 被删除的标签 tab |
 
-## TAB-PANE API
+## Tab-pane Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   |  |         |
-| name       | 与选项卡 activeName 对应的标识符   | string   |  |  该选项卡在选项卡中的 name 值，如第一个选项卡则为'1'  |
+| name       | 与选项卡 activeName 对应的标识符，表示选项卡别名   | string   |  |  该选项卡在选项卡中的 name 值，如第一个选项卡则为'1'  |

examples/docs/tree.md

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