From 49da8f5be2d3c5300eaf687ae27bfc27151bfbf4 Mon Sep 17 00:00:00 2001
From: Cold Stone <xiaoranran1993@outlook.com>
Date: Thu, 5 Dec 2019 11:02:09 +0800
Subject: [PATCH] tree: support custom tree icon

---
 examples/docs/zh-CN/tree.md     | 59 +++++++++++++++++++++++++++++++++
 packages/tree/src/tree-node.vue | 17 ++++++++--
 packages/tree/src/tree.vue      |  3 +-
 3 files changed, 76 insertions(+), 3 deletions(-)

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
+<el-tree
+  :data="data"
+  node-key="id"
+  iconClass="el-icon-circle-plus-outline"
+  expandIconClass="el-icon-remove-outline">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### 自定义节点内容
 节点的内容支持自定义，可以在节点区添加按钮或图标等内容
 
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 @@
       <span
         @click.stop="handleExpandIconClick"
         :class="[
-          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
+          { 'is-leaf': node.isLeaf },
           'el-tree-node__expand-icon',
-          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
+          iconClass
         ]"
       >
       </span>
@@ -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: {