fix: virtual scroll

Author: Create-Peace

examples/src/views/virtualTree/index.vue

@@ -2,10 +2,10 @@
   <div class="test-tree">
     <VueTree
       ref="tree"
-      :height="200"
+      :height="300"
       draggable
       virtual
-      :keeps="50"
+      :keeps="100"
       :treeData="bigTreeData"
       expandedAll
       @on-drop="dropNode"

lib/index.js

@@ -427,76 +427,105 @@
       },
       handleClickCheckBox: function handleClickCheckBox(e) {
         e.stopPropagation();
+      },
+      renderExpandSlot: function renderExpandSlot() {
+        var h = this.$createElement;
+        var expandIconSlot = this.tree.expandIcon;
+        var node = this.node,
+            toggleFold = this.toggleFold,
+            visibleExpand = this.visibleExpand;
+        var expanded = node.data.expanded;
+        return expandIconSlot ? expandIconSlot({
+          expanded: expanded,
+          toggleFoldCb: toggleFold
+        }) : h("span", {
+          "class": ['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand'],
+          "on": {
+            "click": function click() {
+              return toggleFold(node);
+            }
+          },
+          "style": {
+            display: visibleExpand
+          }
+        }, ["\u25BC"]);
+      },
+      renderCheckbox: function renderCheckbox() {
+        var h = this.$createElement;
+        var node = this.node,
+            handleClickCheckBox = this.handleClickCheckBox,
+            selectToggle = this.selectToggle;
+        var _this$tree2 = this.tree,
+            checkboxSlot = _this$tree2.checkbox,
+            showCheckbox = _this$tree2.showCheckbox;
+        var _node$data = node.data,
+            checked = _node$data.checked,
+            partialSelected = _node$data.partialSelected,
+            exceptDisabledChecked = _node$data.exceptDisabledChecked,
+            disabled = _node$data.disabled;
+        return showCheckbox ? checkboxSlot ? checkboxSlot({
+          handleClickCheckBox: handleClickCheckBox,
+          selectToggle: selectToggle,
+          node: node.data
+        }) : h(Checkbox, {
+          "attrs": {
+            "value": checked,
+            "indeterminate": partialSelected,
+            "disabled": disabled
+          },
+          "style": "margin-right: 10px;",
+          "key": exceptDisabledChecked,
+          "nativeOn": {
+            "click": handleClickCheckBox
+          },
+          "on": {
+            "change": function change(val) {
+              return selectToggle(val, node);
+            }
+          }
+        }) : null;
+      },
+      renderLoading: function renderLoading() {
+        var h = this.$createElement;
+        var loadingSlot = this.tree.loading;
+        var loading = this.loading;
+        return loading ? loadingSlot ? loadingSlot({
+          loading: loading
+        }) : h("div", ["\u21BB"]) : null;
+      },
+      renderNodeName: function renderNodeName() {
+        var h = this.$createElement;
+        var tree = this.tree,
+            node = this.node;
+        var name = node.data.name;
+        var renderTreeNode = tree.renderTreeNode,
+            defaultSlot = tree.$scopedSlots.default;
+        return renderTreeNode ? renderTreeNode(node.data) : defaultSlot ? defaultSlot({
+          node: node.data,
+          treeNode: node
+        }) : h("span", [name]);
       }
     },
     render: function render() {
-      var _this3 = this;
-
       var h = arguments[0];
-      var tree = this.tree,
-          node = this.node,
-          loading = this.loading,
-          clickContent = this.clickContent,
-          handleClickCheckBox = this.handleClickCheckBox,
+      var clickContent = this.clickContent,
           activeNode = this.activeNode,
-          visibleExpand = this.visibleExpand;
-
-      var _ref = node.data || {},
-          name = _ref.name,
-          checked = _ref.checked,
-          disabled = _ref.disabled,
-          partialSelected = _ref.partialSelected,
-          expanded = _ref.expanded,
-          exceptDisabledChecked = _ref.exceptDisabledChecked;
-
-      var renderTreeNode = tree.renderTreeNode,
-          defaultSlot = tree.$scopedSlots.default,
-          showCheckbox = tree.showCheckbox;
+          renderExpandSlot = this.renderExpandSlot,
+          renderCheckbox = this.renderCheckbox,
+          renderLoading = this.renderLoading,
+          renderNodeName = this.renderNodeName;
       return h("div", {
         "class": ['node-content', {
           'active-li': activeNode
         }]
-      }, [h("span", {
-        "class": ['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand'],
-        "on": {
-          "click": function click() {
-            return _this3.toggleFold(node);
-          }
-        },
-        "style": {
-          display: visibleExpand
-        }
-      }, ["\u25BC"]), h("div", {
+      }, [renderExpandSlot(), h("div", {
         "class": ['inner-wrap'],
         "on": {
           "click": clickContent
         }
-      }, [showCheckbox && h(Checkbox, {
-        "attrs": {
-          "value": checked,
-          "indeterminate": partialSelected,
-          "disabled": disabled
-        },
-        "style": "margin-right: 10px;",
-        "key": exceptDisabledChecked,
-        "nativeOn": {
-          "click": handleClickCheckBox
-        },
-        "on": {
-          "change": function change(val) {
-            return _this3.selectToggle(val, node);
-          }
-        }
-      }), loading && h("div", {
-        "attrs": {
-          "loading": true
-        }
-      }, ["\u21BB"]), h("div", {
+      }, [renderCheckbox(), renderLoading(), h("div", {
         "class": 'node-name'
-      }, [renderTreeNode ? renderTreeNode(node.data) : defaultSlot ? defaultSlot({
-        node: node.data,
-        treeNode: node
-      }) : h("span", [name])])])]);
+      }, [renderNodeName()])])]);
     }
   };
 
@@ -1583,7 +1612,8 @@
     computed: {
       conStyles: function conStyles() {
         return this.height ? {
-          height: "".concat(this.height, "px")
+          height: "".concat(this.height, "px"),
+          overflow: 'scroll'
         } : {
           height: 'auto'
         };

src/components/Tree/VirtualTreeList.js

@@ -21,7 +21,7 @@ export default {
   },
   computed: {
     conStyles: function () {
-      return this.height ? { height: `${this.height}px` } : { height: 'auto' }
+      return this.height ? { height: `${this.height}px`, overflow: 'scroll' } : { height: 'auto' }
     }
   },
   methods: {