github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #34 from Leopoldthecoder/master 

fix tree bugs
pull/36/head
FuryBean 2016-09-08 12:33:03 +08:00 committed by GitHub
parent 69b0ed7928 01138a5bf7
commit 65d6938ddf
8 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/docs/badge.md
View File

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

4
examples/docs/pagination.md
View File

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

5
examples/docs/progress.md
View File

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

18
examples/docs/table.md
View File

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

7
examples/docs/tag.md
View File

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

6
examples/docs/tree.md
View File

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

4
packages/tree/src/model/node.js
View File

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

12
packages/tree/src/tree-node.vue
View File

@ -6,7 +6,7 @@
<span class="el-tree-node__expand-icon" <span class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }" :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
></span> ></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 <span
v-if="node.loading" v-if="node.loading"
class="el-tree-node__icon el-icon-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) { handleCheckChange(checked) {
this.node.setChecked(checked, true); if (!this.node.indeterminate) {
this.node.setChecked(checked, true);
}
} }
}, },