feat: remove estimatedItemHeight, use itemHeight

Author: leezng

README.md

@@ -119,9 +119,8 @@ plugins: [
 | showDoubleQuotes         | Show doublequotes on key                                                                                                | boolean                                        | true    |
 | virtual                  | Use virtual scroll                                                                                                      | boolean                                        | false   |
 | height                   | The height of list when using virtual                                                                                   | number                                         | 400     |
-| itemHeight               | Fixed row height when using virtual (ignored if `dynamicHeight` is true)                                                | number                                         | 20      |
+| itemHeight               | Fixed row height when using virtual (Estimated row height used before measurement when `dynamicHeight` is true)         | number                                         | 20      |
 | dynamicHeight            | Enable dynamic row heights (measured per row)                                                                           | boolean                                        | false   |
-| estimatedItemHeight      | Estimated row height used before measurement when `dynamicHeight` is true                                               | number                                         | 20      |
 | selectedValue(v-model)   | Selected data path                                                                                                      | string, array                                  | -       |
 | rootPath                 | Root data path                                                                                                          | string                                         | `root`  |
 | nodeSelectable           | Defines whether a node supports selection                                                                               | (node) => boolean                              | -       |

example/VirtualList.vue

@@ -14,10 +14,6 @@
           <label>dynamicHeight</label>
           <input v-model="state.dynamicHeight" type="checkbox" />
         </div>
-        <div v-if="state.dynamicHeight">
-          <label>estimatedItemHeight</label>
-          <input v-model="state.estimatedItemHeight" type="number" />
-        </div>
         <div>
           <label>showLine</label>
           <input v-model="state.showLine" type="checkbox" />
@@ -106,7 +102,6 @@ export default defineComponent({
       collapsedNodeLength: Infinity,
       itemHeight: 20,
       dynamicHeight: true,
-      estimatedItemHeight: 20,
     });
 
     const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();

example/styles.less

@@ -82,15 +82,16 @@ body {
 
 .example-box {
   display: flex;
+  gap: 60px;
 
   .title {
     text-align: center;
   }
 
   .block {
-    width: 50%;
+    flex: auto;
     &:first-child {
-      padding-right: 30px;
+      flex: 0 0 450px;
     }
   }
 

src/components/Tree/index.tsx

@@ -51,11 +51,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    // Estimated item height used before measurement in dynamic mode.
-    estimatedItemHeight: {
-      type: Number,
-      default: 20,
-    },
     // When there is a selection function, define the selected path.
     // For multiple selections, it is an array ['root.a','root.b'], for single selection, it is a string of 'root.a'.
     selectedValue: {
@@ -131,7 +126,7 @@ export default defineComponent({
     const initDynamicHeights = (length: number) => {
       heights = Array(length)
         .fill(0)
-        .map(() => props.estimatedItemHeight || props.itemHeight || 20);
+        .map(() => props.itemHeight || 20);
       offsets = new Array(length + 1);
       offsets[0] = 0;
       for (let i = 0; i < length; i++) {
@@ -396,7 +391,7 @@ export default defineComponent({
 
     // Re-initialize dynamic height arrays when data shape changes significantly
     watch(
-      () => [props.dynamicHeight, props.estimatedItemHeight, originFlatData.value.length],
+      () => [props.dynamicHeight, props.itemHeight, originFlatData.value.length],
       () => {
         if (props.virtual && props.dynamicHeight) {
           initDynamicHeights(flatData.value.length);