Skip to content

Commit 4ec79cd

Browse files
wchbradwchbrad
committed
1. Make some adjustments for PR #11;
2. Unify the variable writing specification for parameter passing of components; 3. Add the method description of setCheckedAll
1 parent 36ba7b8 commit 4ec79cd

File tree

8 files changed

+220
-177
lines changed

8 files changed

+220
-177
lines changed

Diff for: ‎element-ui-tree.md

+22-21
Large diffs are not rendered by default.

Diff for: ‎element-ui-tree.zh-CN.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -808,7 +808,7 @@
808808
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
809809
| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false |
810810
| indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16 |
811-
| item-size | 每个节点的高度,单位为像素 | number | — | 26 |
811+
| item-size | 每个节点的高度,单位为像素 | number | — | 26 |
812812
| icon-class | 自定义树节点的图标 | string | - | - |
813813
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false |
814814
| draggable | 是否开启拖拽节点功能 | boolean | — | false |
@@ -835,6 +835,7 @@
835835
| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
836836
| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false` |
837837
| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `false` |
838+
| setCheckedAll | 虚拟滚动时，快速全选或者清除全选的方法，使用setCheckedKeys可能会卡顿 | (checked) 接收一个 boolean 类型的参数，若为 `true` 则全选所有节点，若为 `false` 则取消所有节点的选中/半选状态，默认值为 `false` |
838839
| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false |
839840
| getHalfCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点所组成的数组 | - |
840841
| getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | - |

Diff for: ‎package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@
2323
},
2424
"scripts": {
2525
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
26-
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
27-
"sass:fix": "sass-migrator division **/*.scss"
26+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
2827
},
2928
"browserslist": [
3029
"> 1%",
@@ -39,7 +38,6 @@
3938
"@babel/core": "^7.19.3",
4039
"@babel/preset-env": "^7.19.4",
4140
"babel-loader": "^8.2.5",
42-
"babel-plugin-transform-vue-jsx": "^3.7.0",
4341
"core-js": "^3.6.5",
4442
"cross-env": "^3.1.3",
4543
"css-loader": "^2.1.0",

Diff for: ‎src/App.vue

+16-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
<template>
2-
<div class="ve-tree" style="height:calc(100vh - 20px)">
3-
<vue-easy-tree ref="veTree" node-key="id" height="calc(100vh - 20px)" :data="treeData" :props="props">
2+
<div class="ve-tree" style="height: calc(100vh - 20px)">
3+
<vue-easy-tree
4+
ref="veTree"
5+
node-key="id"
6+
height="calc(100vh - 20px)"
7+
:data="treeData"
8+
:props="props"
9+
:item-size="26"
10+
show-checkbox
11+
>
412
</vue-easy-tree>
513
</div>
614
</template>
@@ -11,9 +19,9 @@ export default {
1119
return {
1220
props: {
1321
label: "name",
14-
children: "children"
22+
children: "children",
1523
},
16-
treeData: []
24+
treeData: [],
1725
};
1826
},
1927
created() {
@@ -25,24 +33,24 @@ export default {
2533
data.push({
2634
id: `${i}`,
2735
name: `test-${i}`,
28-
children: []
36+
children: [],
2937
});
3038
for (let j = 0; j < children; j++) {
3139
data[i].children.push({
3240
id: `${i}-${j}`,
3341
name: `test-${i}-${j}`,
34-
children: []
42+
children: [],
3543
});
3644
for (let k = 0; k < base; k++) {
3745
data[i].children[j].children.push({
3846
id: `${i}-${j}-${k}`,
39-
name: `test-${i}-${j}-${k}`
47+
name: `test-${i}-${j}-${k}`,
4048
});
4149
}
4250
}
4351
}
4452
this.treeData = data;
45-
}
53+
},
4654
};
4755
</script>
4856

Diff for: ‎src/assets/common/var.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ $--cascader-tag-background: #f0f2f5;
486486

487487
/* Group
488488
-------------------------- */
489-
$--group-option-flex: 0 0 (1*0.2) * 100% !default;
489+
$--group-option-flex: 0 0 0.2 * 100% !default;
490490
$--group-option-offset-bottom: 12px !default;
491491
$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
492492
$--group-title-color: $--color-black !default;

Diff for: ‎src/components/tree-node.vue

+40-43
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
'is-current': node.isCurrent,
99
'is-hidden': !node.visible,
1010
'is-focusable': !node.disabled,
11-
'is-checked': !node.disabled && node.checked
11+
'is-checked': !node.disabled && node.checked,
1212
}"
1313
role="treeitem"
1414
tabindex="-1"
@@ -17,24 +17,26 @@
1717
:aria-checked="node.checked"
1818
:draggable="tree.draggable"
1919
@click.stop="handleClick"
20-
@contextmenu="$event => this.handleContextMenu($event)"
20+
@contextmenu="($event) => this.handleContextMenu($event)"
2121
@dragstart.stop="handleDragStart"
2222
@dragover.stop="handleDragOver"
2323
@dragend.stop="handleDragEnd"
2424
@drop.stop="handleDrop"
2525
>
2626
<div
2727
class="el-tree-node__content"
28-
:style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }"
28+
:style="`padding-left:${
29+
(node.level - 1) * tree.indent
30+
}px;height: ${itemSize}px;`"
2931
>
3032
<span
3133
:class="[
3234
{
3335
'is-leaf': node.isLeaf,
34-
expanded: !node.isLeaf && expanded
36+
expanded: !node.isLeaf && expanded,
3537
},
3638
'el-tree-node__expand-icon',
37-
tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
39+
tree.iconClass ? tree.iconClass : 'el-icon-caret-right',
3840
]"
3941
@click.stop="handleExpandIconClick"
4042
></span>
@@ -63,11 +65,11 @@
6365
<el-tree-node
6466
v-for="child in node.childNodes"
6567
:key="getNodeKey(child)"
68+
:node="child"
69+
:item-size="itemSize"
6670
:render-content="renderContent"
6771
:render-after-expand="renderAfterExpand"
6872
:show-checkbox="showCheckbox"
69-
:node="child"
70-
:itemSize="itemSize"
7173
@node-expand="handleChildNodeExpand"
7274
></el-tree-node>
7375
</div>
@@ -92,60 +94,61 @@ export default {
9294
NodeContent: {
9395
props: {
9496
node: {
95-
required: true
96-
}
97+
required: true,
98+
},
9799
},
98100
render(h) {
99101
const parent = this.$parent;
100102
const tree = parent.tree;
101103
const node = this.node;
102104
const { data, store } = node;
103-
return parent.renderContent ? (
104-
parent.renderContent.call(parent._renderProxy, h, {
105-
_self: tree.$vnode.context,
106-
node,
107-
data,
108-
store
109-
})
110-
) : tree.$scopedSlots.default ? (
111-
tree.$scopedSlots.default({ node, data })
112-
) : (
113-
h("span", {
114-
class: "el-tree-node__label"
115-
}, node.label)
116-
);
117-
}
118-
}
105+
return parent.renderContent
106+
? parent.renderContent.call(parent._renderProxy, h, {
107+
_self: tree.$vnode.context,
108+
node,
109+
data,
110+
store,
111+
})
112+
: tree.$scopedSlots.default
113+
? tree.$scopedSlots.default({ node, data })
114+
: h(
115+
"span",
116+
{
117+
class: "el-tree-node__label",
118+
},
119+
node.label
120+
);
121+
},
122+
},
119123
},
120124
121125
mixins: [emitter, commonMethods],
122126
123127
props: {
124-
125128
node: {
126129
type: Object,
127130
default() {
128131
return {};
129-
}
132+
},
130133
},
131134
props: {
132135
type: Object,
133136
default() {
134137
return {};
135-
}
138+
},
136139
},
137140
renderContent: Function,
138141
renderAfterExpand: {
139142
type: Boolean,
140-
default: true
143+
default: true,
141144
},
142145
showCheckbox: {
143146
type: Boolean,
144-
default: false
147+
default: false,
145148
},
146-
itemSize:{
149+
itemSize: {
147150
type: Number,
148-
default: 26
151+
default: 26,
149152
},
150153
},
151154
@@ -155,7 +158,7 @@ export default {
155158
expanded: false,
156159
childNodeRendered: false,
157160
oldChecked: null,
158-
oldIndeterminate: null
161+
oldIndeterminate: null,
159162
};
160163
},
161164
@@ -174,21 +177,15 @@ export default {
174177
if (val) {
175178
this.childNodeRendered = true;
176179
}
177-
}
180+
},
178181
},
179182
180183
methods: {},
181-
184+
182185
created() {
183-
this.init(this.$parent);
184-
document.documentElement.style.setProperty('--virtual-tree-node-height',`${this.itemSize}px`)
185-
}
186+
this.init(this.$parent);
187+
},
186188
};
187189
</script>
188190
<style>
189-
._veTree .el-tree-node__content{
190-
line-height: var(--virtual-tree-node-height)!important;
191-
height: var(--virtual-tree-node-height)!important;
192-
}
193-
194191
</style>

0 commit comments

Comments
 (0)