fix: itemHeight is invalid, delete virtualLines at the same time, use height and itemHeight to calculate. #177

Author: leezng

example/VirtualList.vue

@@ -7,8 +7,8 @@
       <h3>Options:</h3>
       <div class="options">
         <div>
-          <label>virtualLines</label>
-          <input v-model="state.virtualLines" type="number" />
+          <label>itemHeight</label>
+          <input v-model="state.itemHeight" type="number" />
         </div>
         <div>
           <label>showLine</label>
@@ -31,9 +31,8 @@
     <div class="block">
       <h3>vue-json-pretty(1000+ items):</h3>
       <vue-json-pretty
-        style="height: 400px"
         :virtual="true"
-        :virtualLines="+state.virtualLines"
+        :item-height="+state.itemHeight"
         :data="state.data"
         :deep="state.deep"
         :show-line="state.showLine"
@@ -53,7 +52,7 @@ const defaultData = {
   data: [],
 };
 
-for (let i = 0; i < 100000; i++) {
+for (let i = 0; i < 1000; i++) {
   defaultData.data.push({
     news_id: i,
     title: 'iPhone X Review: Innovative future with real black technology',
@@ -73,7 +72,7 @@ export default defineComponent({
       showLine: true,
       collapsedOnClickBrackets: true,
       deep: 3,
-      virtualLines: 20,
+      itemHeight: 20,
     });
 
     watch(

src/components/Tree/index.tsx

@@ -38,10 +38,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    //When using virtual scroll, set the number of items there can be
-    virtualLines: {
+    // When using virtual scroll, set the height of tree.
+    height: {
       type: Number,
-      default: 10,
+      default: 400,
     },
     // When using virtual scroll, define the height of each row.
     itemHeight: {
@@ -134,7 +134,7 @@ export default defineComponent({
     const updateVisibleData = (flatDataValue: FlatDataType) => {
       if (props.virtual) {
         const treeRefValue = tree.value;
-        const visibleCount = props.virtualLines;
+        const visibleCount = props.height / props.itemHeight;
         const scrollTop = (treeRefValue && treeRefValue.scrollTop) || 0;
         const scrollCount = Math.floor(scrollTop / props.itemHeight);
         let start =
@@ -234,6 +234,7 @@ export default defineComponent({
   render() {
     const {
       virtual,
+      height,
       itemHeight,
       customValueFormatter,
       showDoubleQuotes,
@@ -281,6 +282,7 @@ export default defineComponent({
           onBracketsClick={onBracketsClick}
           onSelectedChange={onSelectedChange}
           onValueChange={onValueChange}
+          style={itemHeight && itemHeight !== 20 ? { lineHeight: `${itemHeight}px` } : {}}
         />
       ));
 
@@ -294,8 +296,10 @@ export default defineComponent({
         onScroll={onTreeScroll}
       >
         {virtual ? (
-          <div style={{ height: `${flatData.length * itemHeight}px` }}>
-            <div style={{ transform: `translateY(${state.translateY}px)` }}>{nodeContent}</div>
+          <div style={{ height: `${height}px` }}>
+            <div style={{ height: `${flatData.length * itemHeight}px` }}>
+              <div style={{ transform: `translateY(${state.translateY}px)` }}>{nodeContent}</div>
+            </div>
           </div>
         ) : (
           nodeContent

src/components/TreeNode/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed, PropType } from 'vue';
+import { defineComponent, reactive, computed, PropType, CSSProperties } from 'vue';
 import Brackets from 'src/components/Brackets';
 import CheckController from 'src/components/CheckController';
 import Carets from 'src/components/Carets';
@@ -90,6 +90,7 @@ export default defineComponent({
     collapsed: Boolean,
     // Whether the current node is checked(When using the selection function).
     checked: Boolean,
+    style: Object as PropType<CSSProperties>,
     onTreeNodeClick: {
       type: Function as PropType<(node: NodeDataType) => void>,
     },

src/components/TreeNode/styles.less

@@ -7,6 +7,7 @@
 .@{css-prefix}-tree__node {
   display: flex;
   position: relative;
+  line-height: 20px;
 
   &.has-selector {
     padding-left: @selector-span;