diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index cb2b6a9f4..13f64ba8d 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -395,6 +395,65 @@ ``` ::: +### 自定义节点图标 +设置节点默认和展开的自定义图标 + +:::demo 节点默认和展开状态的图标可以通过 `iconClass` 和 `expandIconClass` 进行设置。 + +```html + + + + +``` +::: + ### 自定义节点内容 节点的内容支持自定义,可以在节点区添加按钮或图标等内容 diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index 3c922dbe6..ea3a40dcb 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -28,9 +28,9 @@ @@ -137,6 +137,19 @@ }; }, + computed: { + iconClass() { + if(this.node.expanded && !this.node.isLeaf) { + if(this.tree.expandIconClass) { + return this.tree.expandIconClass + } else { + return 'el-icon-caret-right expanded' + } + } + return this.tree.iconClass ? this.tree.iconClass : 'el-icon-caret-right' + } + }, + watch: { 'node.indeterminate'(val) { this.handleSelectChange(this.node.checked, val); diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue index 5b1c1b4c4..5238cf92b 100644 --- a/packages/tree/src/tree.vue +++ b/packages/tree/src/tree.vue @@ -128,7 +128,8 @@ type: Number, default: 18 }, - iconClass: String + iconClass: String, + expandIconClass: String }, computed: {