fix #13 #17 #19 #22 #24

wchbrad · Mar 27, 2023 · 9833dde · 9833dde
1 parent e759431
commit 9833dde
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/dist/vue-easy-tree.js b/dist/vue-easy-tree.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@wchbrad/vue-easy-tree",
     "description": "A Vue.js project",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "author": "wchbrad <chao.wu.brad@foxmail.com>",
     "license": "MIT",
     "private": false,
@@ -32,7 +32,7 @@
     ],
     "dependencies": {
         "vue": "2.6.11",
-        "vue-virtual-scroller": "^1.0.10"
+        "vue-virtual-scroller": "~1.0.10"
     },
     "devDependencies": {
         "@babel/core": "^7.19.3",

diff --git a/src/components/ve-tree.vue b/src/components/ve-tree.vue
@@ -20,18 +20,19 @@
       :items="dataList"
       :item-size="itemSize"
       :buffer="50"
-      v-slot="{ active, item }"
     >
-      <ElTreeVirtualNode
-        v-if="active"
-        :style="`height: ${itemSize}px;`"
-        :node="item"
-        :item-size="itemSize"
-        :render-content="renderContent"
-        :show-checkbox="showCheckbox"
-        :render-after-expand="renderAfterExpand"
-        @node-expand="handleNodeExpand"
-      />
+      <template slot-scope="{ active, item }">
+        <ElTreeVirtualNode
+          v-if="active"
+          :style="`height: ${itemSize}px;`"
+          :node="item"
+          :item-size="itemSize"
+          :render-content="renderContent"
+          :show-checkbox="showCheckbox"
+          :render-after-expand="renderAfterExpand"
+          @node-expand="handleNodeExpand"
+        />
+      </template>
     </RecycleScroller>
     <template v-else-if="!height">
       <el-tree-node
@@ -210,12 +211,7 @@ export default {
     },
 
     dataList() {
-      const a = this.smoothTree(this.root.childNodes);
-      const b = [];
-      a.forEach((e) => {
-        b.push(e.key);
-      });
-      return a;
+      return this.smoothTree(this.root.childNodes);
     },
   },
 
@@ -267,6 +263,25 @@ export default {
       this.store.filter(value);
     },
 
+    scrollToItem(key) {
+      if (this.height && !this.isEmpty) {
+        const virtualInstance = this.$children.find(
+          (c) => c.$options.name === "RecycleScroller"
+        );
+        // Automatically scroll the target item to the top
+        const index = virtualInstance.items.findIndex((e) => {
+          return e.key === key;
+        });
+        this.$nextTick(() => {
+          virtualInstance.scrollToItem(index);
+        });
+      } else {
+        throw new Error(
+          "scrollToItem can only be used when using virtual scrolling"
+        );
+      }
+    },
+
     getNodeKey(node) {
       return getNodeKey(this.nodeKey, node.data);
     },
@@ -650,4 +665,4 @@ export default {
     this.checkboxItems = this.$el.querySelectorAll("input[type=checkbox]");
   },
 };
-</script>
+</script>