Merge pull request #533 from forrany/bigtree/scroll

bugfix(tree): 修复 tree 组件开启虚拟滚动后无法正常显示的问题 #523
TencentBlueKing · May 10, 2024 · d87cc8f · d87cc8f
2 parents d7f75ac + 13878ba
commit d87cc8f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/example/components/big-tree/readme.md b/example/components/big-tree/readme.md
@@ -480,11 +480,11 @@
 
 ### 超出滚动条 {page=#/big-tree}
 
-:::demo 默认情况下组件宽度与容器宽度相同且不会有滚动条，如果需要滚动条，需要配置`fixed-width`属性
+:::demo 默认情况下组件宽度与容器宽度相同且不会有滚动条，如果需要滚动条，需要配置`fixed-width`属性。 **注意此属性与虚拟滚动不兼容，若传入`height`属性会自动开启虚拟滚动，造成此属性失效。如果需要使用此属性，建议在容器添加`height`限制。**
 
 ```html
 <template>
-    <section style="width: 150px">
+    <section style="width: 150px;">
         <bk-big-tree
             enable-title-tip
             ref="tree"

diff --git a/src/components/big-tree/tree.vue b/src/components/big-tree/tree.vue
@@ -30,19 +30,19 @@
   <div
     :style="{ height: treeHeight }"
     :class="['bk-big-tree', extCls, { 'with-virtual-scroll': !!height }, { 'bk-big-tree--small': size === 'small' }]">
-    <div :class="['tree-wrapper', { 'fixed-width': fixedWidth }]">
-      <!-- 虚拟滚动 -->
-      <bk-virtual-scroll
-        :item-height="nodeHeight"
-        ref="virtualScroll"
-        v-if="height">
-        <tree-item slot-scope="{ data: node }"
-          :node="node" :id="`bk-big-tree-${id}-node-${node.id}`">
-          <slot :node="node" :data="node.data"></slot>
-        </tree-item>
-      </bk-virtual-scroll>
+    <!-- 虚拟滚动 -->
+    <bk-virtual-scroll
+      :item-height="nodeHeight"
+      ref="virtualScroll"
+      v-if="height">
+      <tree-item slot-scope="{ data: node }"
+        :node="node" :id="`bk-big-tree-${id}-node-${node.id}`">
+        <slot :node="node" :data="node.data"></slot>
+      </tree-item>
+    </bk-virtual-scroll>
+    <div :class="['tree-wrapper', { 'fixed-width': fixedWidth }]" style="height: 100%;" v-else>
       <!-- 非虚拟滚动 -->
-      <template v-for="node in nodes" v-else>
+      <template v-for="node in nodes">
         <tree-item
           :enable-title-tip="enableTitleTip"
           :node="node"
@@ -51,12 +51,11 @@
           <slot :node="node" :data="node.data"></slot>
         </tree-item>
       </template>
-
-      <div class="bk-big-tree-empty" v-if="($slots.empty || useDefaultEmpty) && isSearchEmpty">
-        <slot name="empty">
-          {{t('bk.bigTree.emptyText')}}
-        </slot>
-      </div>
+    </div>
+    <div class="bk-big-tree-empty" v-if="($slots.empty || useDefaultEmpty) && isSearchEmpty">
+      <slot name="empty">
+        {{t('bk.bigTree.emptyText')}}
+      </slot>
     </div>
   </div>
 </template>