element-pe 2.2.90 → 2.2.92

package/dist/index.full.js

@@ -43608,6 +43608,7 @@
     const sortProp = vue.ref(null);
     const sortOrder = vue.ref(null);
     const hoverRow = vue.ref(null);
+    const renderRange = vue.ref([-1, -1, 32]);
     watch(data, () => instance.state && scheduleLayout(false), {
       deep: true
     });
@@ -43926,6 +43927,39 @@
         toggleTreeExpansion(row, expanded);
       }
     };
+    const onScroll = (evt) => {
+      if (instance.setupState.scrollBarRef) {
+        const rows = instance.setupState.scrollBarRef.wrapRef.querySelectorAll(".el-table .el-table__body tbody>tr");
+        if (rows.length > 0) {
+          const wrapRect = instance.setupState.scrollBarRef.wrapRef.getBoundingClientRect();
+          const wrapStart = wrapRect.y;
+          const wrapEnd = wrapRect.y + wrapRect.height;
+          let firstIndex = -1;
+          let lastIndex = -1;
+          const lastRect = rows[rows.length - 1].getBoundingClientRect();
+          if (lastRect.y + lastRect.height < wrapEnd) {
+            lastIndex = rows.length - 1;
+          }
+          for (let i = 0; i < rows.length; i++) {
+            if (firstIndex !== -1 && lastIndex !== -1) {
+              break;
+            }
+            const rowRect = rows[i].getBoundingClientRect();
+            if (rowRect.y <= wrapStart && rowRect.y + rowRect.height > wrapStart) {
+              firstIndex = i;
+            }
+            if (rowRect.y + rowRect.height >= wrapEnd && rowRect.y < wrapEnd) {
+              lastIndex = i;
+            }
+          }
+          if (firstIndex !== -1 && lastIndex !== -1) {
+            renderRange.value[0] = firstIndex - 20 > 0 ? firstIndex - 20 : 0;
+            renderRange.value[1] = lastIndex + 20 < rows.length - 1 ? lastIndex + 20 : rows.length - 1;
+            renderRange.value[2] = (rows[firstIndex].getBoundingClientRect().height + rows[lastIndex].getBoundingClientRect().height) / 2;
+          }
+        }
+      }
+    };
     return {
       assertRowKey,
       updateColumns,
@@ -43956,6 +43990,7 @@
       updateCurrentRowData,
       loadOrToggle,
       updateTreeData,
+      onScroll,
       states: {
         tableSize,
         rowKey,
@@ -43985,6 +44020,7 @@
         sortProp,
         sortOrder,
         hoverRow,
+        renderRange,
         ...expandStates,
         ...treeStates,
         ...currentData
@@ -45488,6 +45524,14 @@
       const displayStyle = display ? null : {
         display: "none"
       };
+      const renderStart = props.store.states.renderRange.value[0];
+      const renderEnd = props.store.states.renderRange.value[1];
+      const rowHeight = props.store.states.renderRange.value[2];
+      if (renderStart === -1 && renderEnd === -1 || $index < renderStart || $index > renderEnd) {
+        return vue.h("tr", {
+          style: [`display: block; min-height: ${rowHeight}px; opacity: 0`]
+        });
+      }
       return vue.h("tr", {
         style: [displayStyle, getRowStyle(row, $index)],
         class: rowClasses,
@@ -46040,6 +46084,7 @@
       }
       layout.updateColumnsWidth();
       requestAnimationFrame(syncPosition);
+      store.onScroll();
     };
     vue.onMounted(async () => {
       await vue.nextTick();
@@ -46066,6 +46111,9 @@
         }
       });
       table.$ready = true;
+      setTimeout(() => {
+        store.onScroll();
+      });
     });
     const setScrollClassByEl = (el, className) => {
       if (!el)
@@ -46464,6 +46512,7 @@
         scrollbarStyle
       } = useStyle(props, layout, store, table);
       const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar$1();
+      const { onScroll } = table.store;
       const debouncedUpdateLayout = debounce(doLayout, 50);
       const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
       table.tableId = tableId;
@@ -46520,7 +46569,8 @@
         scrollBarRef,
         scrollTo,
         setScrollLeft,
-        setScrollTop
+        setScrollTop,
+        onScroll
       };
     }
   });
@@ -46604,7 +46654,8 @@
             ref: "scrollBarRef",
             "view-style": _ctx.scrollbarViewStyle,
             "wrap-style": _ctx.scrollbarStyle,
-            always: _ctx.scrollbarAlwaysOn
+            always: _ctx.scrollbarAlwaysOn,
+            onScroll: _ctx.onScroll
           }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("table", {
@@ -46664,7 +46715,7 @@
               ], 2)) : vue.createCommentVNode("v-if", true)
             ]),
             _: 3
-          }, 8, ["view-style", "wrap-style", "always"])
+          }, 8, ["view-style", "wrap-style", "always", "onScroll"])
         ], 2),
         _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
@@ -50111,7 +50162,7 @@
         let remainWidth = parentWidth.value;
         const usedWidth = {};
         columns.value.forEach((item, index) => {
-          if (item.props.width) {
+          if (item.props.width && !forEditor.value) {
             let uWidth;
             if (item.props.width.endsWith("px")) {
               uWidth = Number.parseInt(item.props.width.slice(0, Math.max(0, item.props.width.length - 2)));