fix(pro:tree): add height prop supports, update proTree header height…

… and container padding (#1112) * feat(pro:tree): proTree supports height prop now * fix(pro:tree): update proTree header height and container padding
IDuxFE · Sep 2, 2022 · 69fa736 · 69fa736
1 parent c59d4de
commit 69fa736
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 4 deletions.
diff --git a/packages/pro/tree/demo/Basic.vue b/packages/pro/tree/demo/Basic.vue
@@ -7,6 +7,7 @@
     class="demo-pro-tree"
     placeholder="搜索"
     :style="{ height: '400px' }"
+    :height="321"
     :checkable="true"
     :dataSource="treeData"
     :onSearch="onSearch"

diff --git a/packages/pro/tree/docs/Api.zh.md b/packages/pro/tree/docs/Api.zh.md
@@ -28,6 +28,7 @@
 | `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - |
 | `expandIcon` | 树节点展开图标 | `string \| [string, string] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `['minus-square', 'plus-square']` | - | 当为数组时表示[`展开时图标`,`未展开时图标`] |
 | `header` | 树的头部 | `string \| HeaderProps \| #header="{expanded, onClick}"` | - | - | - |
+| `height` | 设置虚拟滚动容器高度 | `number` | - | - | - |
 | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | - | - |
 | `labelKey` | 替代[TreeNode](#TreeNode)中的`label`字段 | `string` | `label` | - | - |
 | `leafLineIcon` | 叶子节点的图标，用于替换默认的连接线 | `string \| #leafLineIcon` | - | - | 仅在 `showLine` 时生效 |

diff --git a/packages/pro/tree/src/ProTree.tsx b/packages/pro/tree/src/ProTree.tsx
@@ -104,6 +104,7 @@ export default defineComponent({
         expandIcon: props.expandIcon,
         empty: props.empty,
         getKey: props.getKey,
+        height: props.height,
         labelKey: props.labelKey,
         leafLineIcon: props.leafLineIcon,
         showLine: props.showLine,

diff --git a/packages/pro/tree/src/types.ts b/packages/pro/tree/src/types.ts
@@ -50,6 +50,7 @@ export const proTreeProps = {
   },
   getKey: { type: [String, Function] as PropType<string | ((data: TreeNode<any>) => any)>, default: undefined },
   header: { type: [String, Object] as PropType<string | HeaderProps>, default: undefined },
+  height: Number,
   labelKey: { type: String, default: undefined },
   leafLineIcon: { type: String, default: undefined },
   loadChildren: { type: Function as PropType<(node: TreeNode<any>) => Promise<TreeNode<any>[]>>, default: undefined },

diff --git a/packages/pro/tree/style/index.less b/packages/pro/tree/style/index.less
@@ -40,9 +40,8 @@
     }
 
     .@{icon-prefix},
-    .@{header-prefix} {
+    .@{header-prefix}-content {
       height: @pro-tree-header-wrapper-height;
-      line-height: @pro-tree-header-wrapper-height;
     }
 
     & + .@{divider-prefix} {

diff --git a/packages/pro/tree/style/themes/default.variable.less b/packages/pro/tree/style/themes/default.variable.less
@@ -1,13 +1,13 @@
 @pro-tree-border: 1px solid @color-graphite-l30;
-@pro-tree-padding: 4px 0 8px 0;
+@pro-tree-padding: 0;
 @pro-tree-header-search-wrapper-gap: 4px;
 @pro-tree-header-search-wrapper-horizontal-spacing: 12px;
 @pro-tree-header-search-wrapper-vertical-spacing: 0;
 @pro-tree-search-wrapper-margin-bottom: 8px;
 @pro-tree-search-input-suffix-color: @color-graphite-l10;
 @pro-tree-header-wrapper-icon-font-size: @font-size-lg;
 @pro-tree-header-wrapper-icon-hover-color: @color-primary;
-@pro-tree-header-wrapper-height: 32px;
+@pro-tree-header-wrapper-height: 38px;
 @pro-tree-divider-horizontal-spacing: @pro-tree-header-search-wrapper-horizontal-spacing;
 @pro-tree-divider-vertical-spacing: 8px;
 @pro-tree-node-padding: 0 0 0 8px;