Merge pull request #34 from Leopoldthecoder/master

fix tree bugs

examples/docs/badge.md

@@ -5,7 +5,8 @@
 </style>
 
 ## Badge 标记
-出现在按钮、图标旁的数字或状态标记
+
+出现在按钮、图标旁的数字或状态标记。
 
 ### 基础用法
 展示新消息数量。

examples/docs/pagination.md

@@ -1,6 +1,6 @@
 ## Pagination 分页
 
-当数据量过多时，使用分页分解数据
+当数据量过多时，使用分页分解数据。
 
 ### 基础用法
 
@@ -40,6 +40,8 @@
 
 ### 附加功能
 
+根据场景需要，可以添加其他功能模块。
+
 :::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
 
 ```html

examples/docs/progress.md

@@ -11,7 +11,8 @@
 </style>
 
 ## Progress 进度条
-用于展示操作进度，告知用户当前状态和预期
+
+用于展示操作进度，告知用户当前状态和预期。
 
 ### 线形进度条 — 百分比外显
 
@@ -27,7 +28,7 @@
 
 ### 线形进度条 — 百分比内显
 
-百分比不占用额外控件，适用于文件上传等场景
+百分比不占用额外控件，适用于文件上传等场景。
 
 :::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。
 

examples/docs/table.md

@@ -105,7 +105,7 @@
 
 ### 基础表格
 
-基础的表格展示用法
+基础的表格展示用法。
 
 :::demo 当`el-table`元素中注入`data`对象数组后，在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。
 ```html
@@ -160,7 +160,7 @@
 
 ### 带斑马纹表格
 
-使用带斑马纹的表格，可以更容易区分出不同行的数据
+使用带斑马纹的表格，可以更容易区分出不同行的数据。
 
 :::demo `stripe`属性可以创建带斑马纹的表格。它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
 ```html
@@ -270,7 +270,7 @@
 
 ### 带状态表格
 
-可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容
+可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
 
 :::demo 为行添加自定义背景色，表明该行处于某种状态。若某一行拥有`custom-criteria`数组中的某个字段且值为`true`，则为该行添加`custom-background-colors`数组中对应的背景色。
 ```html
@@ -329,7 +329,7 @@
 
 ### 固定表头
 
-纵向内容过多时，可选择固定表头
+纵向内容过多时，可选择固定表头。
 
 :::demo 只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码。
 ```html
@@ -398,7 +398,7 @@
 
 ### 固定列
 
-横向内容过多时，可选择固定首列
+横向内容过多时，可选择固定首列。
 
 :::demo 固定列需要使用`fixed-column-count`属性，它接受一个`Number`，表示左起要固定的列数。
 ```html
@@ -456,7 +456,7 @@
 
 ### 固定列和表头
 
-横纵内容过多时，可选择固定列和表头
+横纵内容过多时，可选择固定列和表头。
 
 :::demo 固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
 ```html
@@ -527,7 +527,7 @@
 
 ### 单选
 
-选择单行数据时使用色块表示
+选择单行数据时使用色块表示。
 
 :::demo Table 组件提供了选择的支持，只需要配置`selection-mode`属性即可实现单选（`single`）、多选（`multiple`)，如果不需要则设置为`none`。之后由`selectionchange`事件来管理选中时触发的事件，它会传入一个`value`，`value`为生成表格时的对应对象。本例中还使用了`allow-no-selection`属性，它接受一个`Boolean`，若为`true`，则允许为空，默认为`false`，此时将会产生默认值，为填入数组的第一个对象。如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。
 ```html
@@ -596,7 +596,7 @@
 
 ### 多选
 
-选择多行数据时使用 Checkbox
+选择多行数据时使用 Checkbox。
 
 :::demo 除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`事件中的参数从对象变成了对象数组。此外，需要提供一个列来显示多选框: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`：设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
 ```html
@@ -678,7 +678,7 @@
 
 ### 排序
 
-对表格进行排序，可快速查找或对比数据
+对表格进行排序，可快速查找或对比数据。
 
 :::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
 ```html

examples/docs/tag.md

@@ -29,9 +29,10 @@
 </style>
 
 ## Tag 标签
-用于标记和选择
 
-### 基础使用
+用于标记和选择。
+
+### 基础用法
 
 :::demo 由`type`属性来定义，该属性可选填。
 
@@ -45,7 +46,7 @@
 ```
 :::
 
-### 可移除的标签
+### 可移除标签
 
 :::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。
 

examples/docs/tree.md

@@ -96,10 +96,12 @@
 
 ## Tree 树形控件
 
-用清晰的层级结构展示信息，可展开或折叠
+用清晰的层级结构展示信息，可展开或折叠。
 
 ### 基础用法
 
+基础的树形结构展示。
+
 ::: demo
 ```html
 <el-tree :data="data" :props="defaultProps"></el-tree>
@@ -141,7 +143,7 @@
 
 ### 可选择
 
-适用于需要选择层级的时候使用。
+适用于需要选择层级时使用。
 
 ::: demo
 ```html

packages/tree/src/model/node.js

@@ -9,10 +9,10 @@ const reInitChecked = function(node) {
 
   for (let i = 0, j = siblings.length; i < j; i++) {
     const sibling = siblings[i];
-    if (sibling.checked !== true) {
+    if (sibling.checked !== true || sibling.indeterminate) {
       all = false;
     }
-    if (sibling.checked !== false) {
+    if (sibling.checked !== false || sibling.indeterminate) {
       none = false;
     }
   }

packages/tree/src/tree-node.vue

@@ -6,7 +6,7 @@
       <span class="el-tree-node__expand-icon"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
         ></span>
-      <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" @change="handleCheckChange"></el-checkbox>
+      <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" @change="handleCheckChange" @click.native="handleUserClick"></el-checkbox>
       <span
         v-if="node.loading"
         class="el-tree-node__icon el-icon-loading"
@@ -67,8 +67,16 @@
         }
       },
 
+      handleUserClick() {
+        if (this.node.indeterminate) {
+          this.node.setChecked(this.node.checked, true);
+        }
+      },
+
       handleCheckChange(checked) {
-        this.node.setChecked(checked, true);
+        if (!this.node.indeterminate) {
+          this.node.setChecked(checked, true);
+        }
       }
     },