bug fixed #458

Author: huangshuwei

examples/src/docs/en/ve-table/api/db.js

@@ -705,13 +705,13 @@ export const db = {
                 optionalVal: "-",
                 default: "-",
             },
-            /* {
-                param: "bufferScale",
-                desc: `缓冲比例。可视范围数据的整数倍，防止滚动过快白屏，默认无缓冲`,
+            {
+                param: "bufferCount",
+                desc: `Number of buffered renderings. By default, only the row data within the height of the current container is rendered. Buffered data can render additional row data, which can effectively solve the problem of merging too many rows of data`,
                 type: "<code>Number</code>",
                 optionalVal: "-",
-                default: "0"
-            } */
+                default: "1",
+            },
         ],
         columns: columnsType1,
     },

examples/src/docs/zh/ve-table/api/db.js

@@ -711,13 +711,13 @@ export const db = {
                 optionalVal: "-",
                 default: "-",
             },
-            /* {
-                param: "bufferScale",
-                desc: `缓冲比例。可视范围数据的整数倍，防止滚动过快白屏，默认无缓冲`,
+            {
+                param: "bufferCount",
+                desc: `缓冲渲染数量。默认只渲染当前容器高度内的行数据，缓冲数据可以额外渲染行数据，可以有效解决合并过多行数据的问题`,
                 type: "<code>Number</code>",
                 optionalVal: "-",
-                default: "0"
-            } */
+                default: "1",
+            },
         ],
         columns: columnsType1,
     },

packages/ve-table/src/index.jsx

@@ -143,8 +143,7 @@ export default {
         virual scroll option
         {
             enable:true,
-            isFixedRowHeight:false,  // 如果为 true 使用 rowHeight，否则使用 minRowHeight
-            fixedRowHeight:40,
+            bufferCount:10, // 缓冲的数据
             minRowHeight:40,
             scrolling:(startRowIndex,visibleStartIndex,visibleEndIndex,visibleAboveCount,visibleBelowCount)=>{}
         }
@@ -353,6 +352,24 @@ export default {
 
             return result;
         },
+        // virtual scroll buffer count
+        virtualScrollBufferCount() {
+            const { virtualScrollOption, defaultVirtualScrollBufferCount } =
+                this;
+
+            let result = defaultVirtualScrollBufferCount;
+            if (virtualScrollOption) {
+                const { bufferCount } = virtualScrollOption;
+                if (
+                    isNumber(bufferCount) &&
+                    bufferCount > defaultVirtualScrollBufferCount
+                ) {
+                    result = bufferCount;
+                }
+            }
+
+            return result;
+        },
         // virtual scroll visible count
         virtualScrollVisibleCount() {
             let result = 0;
@@ -1125,14 +1142,14 @@ export default {
         // get virtual scroll above count
         getVirtualScrollAboveCount() {
             let result = 0;
-            const { isVirtualScroll, defaultVirtualScrollBufferCount } = this;
+            const { isVirtualScroll, virtualScrollBufferCount } = this;
 
             const virtualScrollStartIndex = this.virtualScrollStartIndex;
 
             if (isVirtualScroll) {
                 result = Math.min(
                     virtualScrollStartIndex,
-                    defaultVirtualScrollBufferCount,
+                    virtualScrollBufferCount,
                 );
             }
             return result;
@@ -1142,18 +1159,15 @@ export default {
         getVirtualScrollBelowCount() {
             let result = 0;
 
-            const {
-                isVirtualScroll,
-                tableData,
-                defaultVirtualScrollBufferCount,
-            } = this;
+            const { isVirtualScroll, tableData, virtualScrollBufferCount } =
+                this;
 
             const virtualScrollEndIndex = this.virtualScrollEndIndex;
 
             if (isVirtualScroll) {
                 result = Math.min(
                     tableData.length - virtualScrollEndIndex,
-                    defaultVirtualScrollBufferCount,
+                    virtualScrollBufferCount,
                 );
             }
 

tests/unit/specs/ve-table-virtual-scroll.spec.js

@@ -248,6 +248,54 @@ describe("veTable virtual scroll", () => {
         );
     });
 
+    it("buffer count", async () => {
+        const bufferCount = 10;
+
+        const wrapper = mount(veTable, {
+            propsData: {
+                columns: [
+                    {
+                        field: "name",
+                        key: "b",
+                        title: "Name",
+                        width: 200,
+                        align: "left",
+                    },
+                    {
+                        field: "hobby",
+                        key: "c",
+                        title: "Hobby",
+                        width: 300,
+                        align: "left",
+                    },
+                    {
+                        field: "address",
+                        key: "d",
+                        title: "Address",
+                        width: "",
+                        align: "left",
+                    },
+                ],
+                tableData: TABLE_DATA_DIFFERENT_ROW_HEIGHT,
+                virtualScrollOption: {
+                    // 是否开启
+                    enable: true,
+                    bufferCount: bufferCount,
+                },
+                maxHeight: MAX_HEIGHT,
+                rowKeyFieldName: "rowKey",
+            },
+        });
+
+        wrapper.triggerResizeObserver({ width: MAX_HEIGHT });
+
+        await later();
+
+        expect(wrapper.findAll(".ve-table-body-tr").length).toBe(
+            Math.ceil(MAX_HEIGHT / MIN_ROW_HEIGHT) + bufferCount,
+        );
+    });
+
     it("with row checkbox", async () => {
         const wrapper = mount(veTable, {
             propsData: {