Skip to content

Commit 36ba7b8

Browse files
ZertuZertu
authored
fix #6 (#11)
* update code to latest Babel & fix sass div * add itemSize prop so that item size can be changed fix issue #6 * pass item-size to tree node component * fix yarn needs babel/core
1 parent 4ab1361 commit 36ba7b8

10 files changed

+46
-25
lines changed

‎.babelrc

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{
2-
"presets": [
3-
["env", { "modules": false }],
4-
"stage-2"
5-
],
6-
"plugins":["transform-vue-jsx"]
2+
"presets": [
3+
"@babel/env"
4+
]
75
}

‎element-ui-tree.md

+1
Original file line numberDiff line numberDiff line change
@@ -802,6 +802,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
802802
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
803803
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
804804
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
805+
| item-size | height of each node in pixels | number | — | 26 |
805806
| icon-class | custome tree node icon | string | - | - |
806807
| lazy | whether to lazy load leaf node, used with `load` attribute | boolean | — | false |
807808
| draggable | whether enable tree nodes drag and drop | boolean | — | false |

‎element-ui-tree.zh-CN.md

+1
Original file line numberDiff line numberDiff line change
@@ -808,6 +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 |
811812
| icon-class | 自定义树节点的图标 | string | - | - |
812813
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false |
813814
| draggable | 是否开启拖拽节点功能 | boolean | — | false |

‎package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
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"
26+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
27+
"sass:fix": "sass-migrator division **/*.scss"
2728
},
2829
"browserslist": [
2930
"> 1%",
@@ -35,12 +36,16 @@
3536
"vue-virtual-scroller": "^1.0.10"
3637
},
3738
"devDependencies": {
39+
"@babel/core": "^7.19.3",
40+
"@babel/preset-env": "^7.19.4",
41+
"babel-loader": "^8.2.5",
42+
"babel-plugin-transform-vue-jsx": "^3.7.0",
3843
"core-js": "^3.6.5",
3944
"cross-env": "^3.1.3",
4045
"css-loader": "^2.1.0",
4146
"file-loader": "^1.1.11",
4247
"html-webpack-plugin": "^3.2.0",
43-
"node-sass": "^4.11.0",
48+
"sass": "^1.55.0",
4449
"sass-loader": "^7.1.0",
4550
"uglifyjs-webpack-plugin": "^2.1.1",
4651
"vue-loader": "^15.7.0",

‎src/App.vue

+2-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
<template>
22
<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-
></vue-easy-tree>
3+
<vue-easy-tree ref="veTree" node-key="id" height="calc(100vh - 20px)" :data="treeData" :props="props">
4+
</vue-easy-tree>
105
</div>
116
</template>
127

@@ -51,5 +46,3 @@ export default {
5146
};
5247
</script>
5348

54-
<style>
55-
</style>

‎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/5) * 100% !default;
489+
$--group-option-flex: 0 0 (1*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;

‎src/assets/tree.scss

-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
@include e(content) {
5050
display: flex;
5151
align-items: center;
52-
height: 26px;
5352
cursor: pointer;
5453
&>.el-tree-node__expand-icon {
5554
padding: 6px;

‎src/components/tree-node.vue

+17-3
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
:render-after-expand="renderAfterExpand"
6868
:show-checkbox="showCheckbox"
6969
:node="child"
70+
:itemSize="itemSize"
7071
@node-expand="handleChildNodeExpand"
7172
></el-tree-node>
7273
</div>
@@ -120,6 +121,7 @@ export default {
120121
mixins: [emitter, commonMethods],
121122
122123
props: {
124+
123125
node: {
124126
type: Object,
125127
default() {
@@ -140,7 +142,11 @@ export default {
140142
showCheckbox: {
141143
type: Boolean,
142144
default: false
143-
}
145+
},
146+
itemSize:{
147+
type: Number,
148+
default: 26
149+
},
144150
},
145151
146152
data() {
@@ -172,9 +178,17 @@ export default {
172178
},
173179
174180
methods: {},
175-
181+
176182
created() {
177-
this.init(this.$parent);
183+
this.init(this.$parent);
184+
document.documentElement.style.setProperty('--virtual-tree-node-height',`${this.itemSize}px`)
178185
}
179186
};
180187
</script>
188+
<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+
194+
</style>

‎src/components/ve-tree.vue

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="el-tree"
3+
class="el-tree _veTree"
44
:class="{
55
'el-tree--highlight-current': highlightCurrent,
66
'is-dragging': !!dragState.draggingNode,
@@ -18,14 +18,15 @@
1818
}"
1919
key-field="key"
2020
:items="dataList"
21-
:item-size="26"
21+
:item-size="itemSize"
2222
:buffer="50"
2323
v-slot="{ active,item }"
2424
>
2525
<ElTreeVirtualNode
2626
v-if="active"
27-
style="height: 26px;"
27+
:style="`height: ${itemSize}px;`"
2828
:node="item"
29+
:itemSize="itemSize"
2930
:renderContent="renderContent"
3031
:showCheckbox="showCheckbox"
3132
:render-after-expand="renderAfterExpand"
@@ -38,6 +39,7 @@
3839
:key="getNodeKey(child)"
3940
:node="child"
4041
:props="props"
42+
:itemSize="itemSize"
4143
:show-checkbox="showCheckbox"
4244
:render-content="renderContent"
4345
:render-after-expand="renderAfterExpand"
@@ -101,6 +103,10 @@ export default {
101103
type: Boolean,
102104
default: false
103105
},
106+
itemSize:{
107+
type: Number,
108+
default: 26
109+
},
104110
autoExpandParent: {
105111
type: Boolean,
106112
default: true

‎src/components/virtual-tree-node.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
:aria-checked="node.checked" :draggable="tree.draggable" @click.stop="handleClick"
1010
@contextmenu="$event => this.handleContextMenu($event)" @dragstart.stop="handleDragStart"
1111
@dragover.stop="handleDragOver" @dragend.stop="handleDragEnd" @drop.stop="handleDrop">
12-
<div class="el-tree-node__content">
12+
<div class="el-tree-node__content" :style="`height: ${itemSize}px;`">
1313
<span aria-hidden="true" :style="{
1414
'min-width': (node.level - 1) * tree.indent + 'px'
1515
}"></span>
@@ -73,6 +73,10 @@ export default {
7373
mixins: [emitter, commonMethods],
7474
7575
props: {
76+
itemSize:{
77+
type: Number,
78+
default: 26
79+
},
7680
node: {
7781
default() {
7882
return {};

0 commit comments

Comments
 (0)