Skip to content

Commit 49da8f5

Browse files
committed
tree: support custom tree icon
1 parent 6ec5f8e commit 49da8f5

File tree

3 files changed

+76
-3
lines changed

3 files changed

+76
-3
lines changed

examples/docs/zh-CN/tree.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,65 @@
395395
```
396396
:::
397397

398+
### 自定义节点图标
399+
设置节点默认和展开的自定义图标
400+
401+
:::demo 节点默认和展开状态的图标可以通过 `iconClass``expandIconClass` 进行设置。
402+
403+
```html
404+
<el-tree
405+
:data="data"
406+
node-key="id"
407+
iconClass="el-icon-circle-plus-outline"
408+
expandIconClass="el-icon-remove-outline">
409+
</el-tree>
410+
411+
<script>
412+
export default {
413+
data() {
414+
return {
415+
data: [{
416+
id: 1,
417+
label: '一级 1',
418+
children: [{
419+
id: 4,
420+
label: '二级 1-1',
421+
children: [{
422+
id: 9,
423+
label: '三级 1-1-1'
424+
}, {
425+
id: 10,
426+
label: '三级 1-1-2'
427+
}]
428+
}]
429+
}, {
430+
id: 2,
431+
label: '一级 2',
432+
children: [{
433+
id: 5,
434+
label: '二级 2-1'
435+
}, {
436+
id: 6,
437+
label: '二级 2-2'
438+
}]
439+
}, {
440+
id: 3,
441+
label: '一级 3',
442+
children: [{
443+
id: 7,
444+
label: '二级 3-1'
445+
}, {
446+
id: 8,
447+
label: '二级 3-2'
448+
}]
449+
}],
450+
};
451+
}
452+
};
453+
</script>
454+
```
455+
:::
456+
398457
### 自定义节点内容
399458
节点的内容支持自定义,可以在节点区添加按钮或图标等内容
400459

packages/tree/src/tree-node.vue

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@
2828
<span
2929
@click.stop="handleExpandIconClick"
3030
:class="[
31-
{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
31+
{ 'is-leaf': node.isLeaf },
3232
'el-tree-node__expand-icon',
33-
tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
33+
iconClass
3434
]"
3535
>
3636
</span>
@@ -137,6 +137,19 @@
137137
};
138138
},
139139
140+
computed: {
141+
iconClass() {
142+
if(this.node.expanded && !this.node.isLeaf) {
143+
if(this.tree.expandIconClass) {
144+
return this.tree.expandIconClass
145+
} else {
146+
return 'el-icon-caret-right expanded'
147+
}
148+
}
149+
return this.tree.iconClass ? this.tree.iconClass : 'el-icon-caret-right'
150+
}
151+
},
152+
140153
watch: {
141154
'node.indeterminate'(val) {
142155
this.handleSelectChange(this.node.checked, val);

packages/tree/src/tree.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,8 @@
128128
type: Number,
129129
default: 18
130130
},
131-
iconClass: String
131+
iconClass: String,
132+
expandIconClass: String
132133
},
133134
134135
computed: {

0 commit comments

Comments
 (0)