feat: 虚拟列表支持高度自适应

baidu · Nov 21, 2024 · 4c52ab0 · 4c52ab0
1 parent de7798f
commit 4c52ab0
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 13 deletions.
diff --git a/docs/zh-CN/components/form/input-tree.md b/docs/zh-CN/components/form/input-tree.md
@@ -1362,6 +1362,103 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 }
 ```
 
+## 虚拟列表
+
+> 6.9.0 以上版本, 开启 heightAuto 后，虚拟列表将自适应高度
+
+```schema: scope="body"
+{
+    "type": "page",
+    "aside": [
+      {
+        "type": "flex",
+        "direction": "column",
+        "isFixedHeight": true,
+        "style": {
+          "height": "300px"
+        },
+        "items": [
+          {
+            "type": "input-tree",
+            "id": "tree",
+            "name": "tree",
+            "label": false,
+            "heightAuto": true,
+            "virtualThreshold": 5,
+            "options": [
+              {
+                "label": "Folder A",
+                "value": 1,
+                "children": [
+                  {
+                    "label": "file A",
+                    "value": 2
+                  },
+                  {
+                    "label": "file B",
+                    "value": 3
+                  }
+                ]
+              },
+              {
+                "label": "file C",
+                "value": 4
+              },
+              {
+                "label": "file D",
+                "value": 5
+              },
+              {
+                "label": "file E",
+                "value": 6
+              },
+              {
+                "label": "file F",
+                "value": 7
+              },
+              {
+                "label": "file G",
+                "value": 8
+              },
+              {
+                "label": "file H",
+                "value": 9
+              },
+              {
+                "label": "file I",
+                "value": 10
+              },
+              {
+                "label": "file J",
+                "value": 11
+              },
+              {
+                "label": "file K",
+                "value": 12
+              },
+              {
+                "label": "file L",
+                "value": 13
+              }
+            ],
+            "wrapperCustomStyle": {
+              "root": {
+                "height": "100%"
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "body": [
+      {
+        "type": "tpl",
+        "tpl": "开启heightAuto后，设置tree的高度，虚拟列表将自适应"
+      }
+    ]
+}
+```
+
 ## 属性表
 
 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置

diff --git a/packages/amis/src/renderers/Form/InputTree.tsx b/packages/amis/src/renderers/Form/InputTree.tsx
@@ -255,16 +255,18 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
   }
 
   componentDidMount() {
-    this.initOthersHeight();
-    this.handleVirtualListHeight();
-    this.unSensor = resizeSensor(
-      this.rootRef.current?.parentElement!,
-      () => {
-        this.handleVirtualListHeight();
-      },
-      false,
-      'height'
-    );
+    if (this.props.heightAuto) {
+      this.initOthersHeight();
+      this.handleVirtualListHeight();
+      this.unSensor = resizeSensor(
+        this.rootRef.current?.parentElement!,
+        () => {
+          this.handleVirtualListHeight();
+        },
+        false,
+        'height'
+      );
+    }
   }
 
   componentDidUpdate(prevProps: TreeProps, preState: TreeState) {
@@ -292,16 +294,18 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
           'creatable',
           'hideRoot',
           'themeCss',
-          'wrapperCustomStyle'
+          'wrapperCustomStyle',
+          'heightAuto'
         ],
         prevProps,
         props
-      )
+      ) &&
+      props.heightAuto
     ) {
       this.initOthersHeight();
     }
 
-    if (preState.othersHeight !== state.othersHeight) {
+    if (preState.othersHeight !== state.othersHeight && props.heightAuto) {
       this.handleVirtualListHeight();
     }
   }