Tree: add renderAfterExpand

examples/docs/en-US/tree.md

@@ -937,6 +937,7 @@ Only one node among the same level can be expanded at one time.
 | empty-text            | text displayed when data is void         | string                      | —               | —       |
 | node-key              | unique identity key name for nodes, its value should be unique across the whole tree | string                      | —               | —       |
 | props                 | configuration options, see the following table | object                      | —               | —       |
+| render-after-expand   | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
 | load                  | method for loading subtree data          | function(node, resolve)     | —               | —       |
 | render-content        | render function for tree node            | Function(h, { node, data, store }        | —               | —       |
 | highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |

examples/docs/zh-CN/tree.md

@@ -936,6 +936,7 @@
 | empty-text            | 内容为空的时候展示的文本                             | String                      | —    | —     |
 | node-key              | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的               | String                      | —    | —     |
 | props                 | 配置选项，具体看下表                               | object                      | —    | —     |
+| render-after-expand   | 是否在第一次展开某个树节点后才渲染其子节点         | boolean                      | —    | true |
 | load                  | 加载子树数据的方法                                | function(node, resolve)     | —    | —     |
 | render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node, data, store }        | —    | —     |
 | highlight-current     | 是否高亮当前选中节点，默认值是 false。                   | boolean                     | —    | false |

packages/tree/src/tree-node.vue

@@ -41,7 +41,7 @@
     <el-collapse-transition>
       <div
         class="el-tree-node__children"
-        v-if="childNodeRendered"
+        v-if="!renderAfterExpand || childNodeRendered"
         v-show="expanded"
         role="group"
         :aria-expanded="expanded"
@@ -49,6 +49,7 @@
         <el-tree-node
           :render-content="renderContent"
           v-for="child in node.childNodes"
+          :render-after-expand="renderAfterExpand"
           :key="getNodeKey(child)"
           :node="child"
           @node-expand="handleChildNodeExpand">
@@ -77,7 +78,11 @@
         }
       },
       props: {},
-      renderContent: Function
+      renderContent: Function,
+      renderAfterExpand: {
+        type: Boolean,
+        default: true
+      }
     },
 
     components: {

packages/tree/src/tree.vue

@@ -8,6 +8,7 @@
       v-for="child in root.childNodes"
       :node="child"
       :props="props"
+      :render-after-expand="renderAfterExpand"
       :key="getNodeKey(child)"
       :render-content="renderContent"
       @node-expand="handleNodeExpand">
@@ -53,6 +54,10 @@
           return t('el.tree.emptyText');
         }
       },
+      renderAfterExpand: {
+        type: Boolean,
+        default: true
+      },
       nodeKey: String,
       checkStrictly: Boolean,
       defaultExpandAll: Boolean,