Tree: add iconClass attribute (#13337)

Author: ziyoung

examples/docs/en-US/tree.md

@@ -1184,6 +1184,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 | 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) | —               | —       |
 | accordion             | whether only one node among the same level can be expanded at one time | boolean                     | —               | false   |
 | indent                | horizontal indentation of nodes in adjacent levels in pixels | number                     | —    | 16 |
+| icon-class            | custome tree node icon                                       | string                     | -    | -  |
 | lazy                  | whether to lazy load leaf node, used with `load` attribute  | boolean                     | —    | false |
 | draggable             | whether enable tree nodes drag and drop | boolean            | —    | false |
 | allow-drag            | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | Function(node)  | —  | —  |

examples/docs/es/tree.md

@@ -1184,6 +1184,8 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |
 | accordion             | Si solo un nodo de cada nivel puede expandirse a la vez | boolean                           | —                 | false       |
 | indent                | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number                            | —                 | 16          |
+| icon-class            | Custome tree node icon                                                | string                            | -                 | -           |
+| lazy                  | whether to lazy load leaf node, used with `load` attribute  | boolean                     | —    | false |
 | draggable             | si se habilita la función de drag and drop en los nodos | boolean            | —    | false |
 | allow-drag            | esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado. | Function(nodo) | —  | —  |
 | allow-drop            | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino) | Function(Nodoquesearrastra, Nododestino, type) | —    | —     |

examples/docs/zh-CN/tree.md

@@ -1203,6 +1203,7 @@
 | filter-node-method    | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | —    | —     |
 | accordion             | 是否每次只打开一个同级树节点展开                   | boolean                     | —    | false |
 | indent                | 相邻级节点间的水平缩进，单位为像素                 | number                     | —    | 16 |
+| icon-class            | 自定义树节点的图标                              |  string                     | -    | -     |
 | lazy                  | 是否懒加载子节点，需与 load 方法结合使用           | boolean                     | —    | false |
 | draggable             | 是否开启拖拽节点功能                                   | boolean            | —    | false |
 | allow-drag            | 判断节点能否被拖拽                  | Function(node)  | —  | —  |

packages/tree/src/model/node.js

@@ -156,10 +156,6 @@ export default class Node {
     return getPropertyFromData(this, 'label');
   }
 
-  get icon() {
-    return getPropertyFromData(this, 'icon');
-  }
-
   get key() {
     const nodeKey = this.store.key;
     if (this.data) return this.data[nodeKey];

packages/tree/src/tree-node.vue

@@ -26,9 +26,13 @@
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
-        class="el-tree-node__expand-icon el-icon-caret-right"
         @click.stop="handleExpandIconClick"
-        :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
+        :class="[
+          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
+          'el-tree-node__expand-icon',
+          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
+        ]"
+      >
       </span>
       <el-checkbox
         v-if="showCheckbox"

packages/tree/src/tree.vue

@@ -110,7 +110,6 @@
           return {
             children: 'children',
             label: 'label',
-            icon: 'icon',
             disabled: 'disabled'
           };
         }
@@ -126,7 +125,8 @@
       indent: {
         type: Number,
         default: 18
-      }
+      },
+      iconClass: String
     },
 
     computed: {

types/tree.d.ts

@@ -257,4 +257,8 @@ export declare class ElTree<K = any, D = TreeData> extends ElementUIComponent {
    * @param ref key or node data or node instance of the reference node
    */
   insertAfter(data: D, ref: D | K): void;
+
+  /** Custom tree node icon */
+  iconClass?: string;
+
 }