fix(comp:tree): height not working in non-virtual mode (#1244)

IDuxFE · Nov 10, 2022 · fa4d0f3 · fa4d0f3
1 parent 99e4ddd
commit fa4d0f3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
@@ -382,7 +382,7 @@ exports[`Tree > height and virtual work 1`] = `
 exports[`Tree > height and virtual work 2`] = `
 "<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
-  <div class=\\"ix-tree-content\\">
+  <div class=\\"ix-tree-content\\" style=\\"max-height: 100px;\\">
     <div class=\\"ix-tree-content-inner\\">
       <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
         <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>

diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type CSSProperties, type VNodeTypes, computed, defineComponent, provide, ref } from 'vue'
+import { type CSSProperties, type VNodeTypes, computed, defineComponent, normalizeStyle, provide, ref } from 'vue'
 
 import { isNil } from 'lodash-es'
 
@@ -15,7 +15,7 @@ import {
   type VirtualScrollInstance,
   type VirtualScrollToOptions,
 } from '@idux/cdk/scroll'
-import { type VKey, callEmit } from '@idux/cdk/utils'
+import { type VKey, callEmit, convertCssPixel } from '@idux/cdk/utils'
 import { ɵEmpty } from '@idux/components/_private/empty'
 import { useGlobalConfig } from '@idux/components/config'
 import { useGetKey } from '@idux/components/utils'
@@ -185,7 +185,10 @@ export default defineComponent({
             onScrolledChange={handleScrolledChange}
           />
         ) : (
-          <div class={`${mergedPrefixCls.value}-content`}>
+          <div
+            class={`${mergedPrefixCls.value}-content`}
+            style={normalizeStyle(autoHeight.value ? undefined : { maxHeight: convertCssPixel(height) })}
+          >
             <div class={`${mergedPrefixCls.value}-content-inner`}>
               {nodes.map(item => (
                 <TreeNode node={item} {...item}></TreeNode>

diff --git a/packages/components/tree/style/index.less b/packages/components/tree/style/index.less
@@ -177,15 +177,14 @@
 
   &-leaf {
     width: @tree-node-content-height;
-    line-height: @tree-node-content-height;
     align-self: stretch;
     text-align: center;
     cursor: default;
 
     &-line {
       position: relative;
       z-index: 1;
-      display: inline-block;
+      display: block;
       height: 100%;
       width: 100%;