vxe-table 4.13.12 → 4.13.14

package/packages/table/src/table.ts

@@ -400,6 +400,8 @@ export default defineComponent({
       // 已删除行
       removeRowMaps: {},
 
+      cvCacheMaps: {},
+
       inited: false,
       tooltipTimeout: null,
       initStatus: false,
@@ -2931,13 +2933,13 @@ export default defineComponent({
       if (bodyWrapperElem) {
         overflowY = scrollYHeight > bodyWrapperElem.clientHeight
         if (yHandleEl) {
-          reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth)
+          reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14
         }
         reactData.overflowY = overflowY
 
         overflowX = scrollXWidth > bodyWrapperElem.clientWidth
         if (xHandleEl) {
-          reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight)
+          reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14
         }
 
         const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0
@@ -3134,6 +3136,7 @@ export default defineComponent({
       scrollYStore.endIndex = 1
       scrollXStore.startIndex = 0
       scrollXStore.endIndex = 1
+      internalData.cvCacheMaps = {}
       reactData.isRowLoading = true
       reactData.scrollVMLoading = false
       internalData.treeExpandedMaps = {}
@@ -3744,7 +3747,7 @@ export default defineComponent({
     const lazyScrollXData = () => {
       const { lxTimeout, lxRunTime, scrollXStore } = internalData
       const { visibleSize } = scrollXStore
-      const fpsTime = Math.max(5, Math.min(10, Math.floor(visibleSize / 3)))
+      const fpsTime = visibleSize > 26 ? 26 : (visibleSize > 16 ? 14 : 6)
       if (lxTimeout) {
         clearTimeout(lxTimeout)
       }
@@ -3762,7 +3765,7 @@ export default defineComponent({
     const lazyScrollYData = () => {
       const { lyTimeout, lyRunTime, scrollYStore } = internalData
       const { visibleSize } = scrollYStore
-      const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)))
+      const fpsTime = visibleSize > 30 ? 32 : (visibleSize > 20 ? 18 : 8)
       if (lyTimeout) {
         clearTimeout(lyTimeout)
       }
@@ -9850,12 +9853,14 @@ export default defineComponent({
         if (!bodyScrollElem) {
           return
         }
+
         const wheelSpeed = getWheelSpeed(reactData.lastScrollTime)
         const deltaTop = shiftKey ? 0 : Math.ceil(deltaY * wheelSpeed)
         const deltaLeft = shiftKey ? Math.ceil((shiftKey ? (deltaY || deltaX) : deltaX) * wheelSpeed) : 0
 
         const isTopWheel = deltaTop < 0
         const currScrollTop = bodyScrollElem.scrollTop
+
         // 如果滚动位置已经是顶部或底部，则不需要触发
         if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
           return
@@ -9872,9 +9877,8 @@ export default defineComponent({
         if (isRollX) {
           evnt.preventDefault()
           internalData.inWheelScroll = true
-          wheelScrollLeftTo(scrollLeft, (offsetLeft: number) => {
-            internalData.inWheelScroll = true
-            const currLeftNum = offsetLeft
+          if (browseObj['-moz'] || browseObj.safari) {
+            const currLeftNum = scrollLeft
             setScrollLeft(xHandleEl, currLeftNum)
             setScrollLeft(bodyScrollElem, currLeftNum)
             setScrollLeft(headerScrollElem, currLeftNum)
@@ -9886,14 +9890,29 @@ export default defineComponent({
               type: 'table',
               fixed: ''
             })
-          })
+          } else {
+            wheelScrollLeftTo(scrollLeft, (offsetLeft: number) => {
+              internalData.inWheelScroll = true
+              const currLeftNum = offsetLeft
+              setScrollLeft(xHandleEl, currLeftNum)
+              setScrollLeft(bodyScrollElem, currLeftNum)
+              setScrollLeft(headerScrollElem, currLeftNum)
+              setScrollLeft(footerScrollElem, currLeftNum)
+              if (scrollXLoad) {
+                $xeTable.triggerScrollXEvent(evnt)
+              }
+              $xeTable.handleScrollEvent(evnt, isRollY, isRollX, bodyScrollElem.scrollTop, currLeftNum, {
+                type: 'table',
+                fixed: ''
+              })
+            })
+          }
         }
         if (isRollY) {
           evnt.preventDefault()
           internalData.inWheelScroll = true
-          wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
-            internalData.inWheelScroll = true
-            const currTopNum = bodyScrollElem.scrollTop + offsetTop
+          if (browseObj['-moz'] || browseObj.safari) {
+            const currTopNum = scrollTop
             setScrollTop(yHandleEl, currTopNum)
             setScrollTop(bodyScrollElem, currTopNum)
             setScrollTop(leftScrollElem, currTopNum)
@@ -9906,7 +9925,24 @@ export default defineComponent({
               type: 'table',
               fixed: ''
             })
-          })
+          } else {
+            wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
+              internalData.inWheelScroll = true
+              const currTopNum = bodyScrollElem.scrollTop + offsetTop
+              setScrollTop(yHandleEl, currTopNum)
+              setScrollTop(bodyScrollElem, currTopNum)
+              setScrollTop(leftScrollElem, currTopNum)
+              setScrollTop(rightScrollElem, currTopNum)
+              setScrollTop(rowExpandEl, currTopNum)
+              if (scrollYLoad) {
+                $xeTable.triggerScrollYEvent(evnt)
+              }
+              $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, bodyScrollElem.scrollLeft, {
+                type: 'table',
+                fixed: ''
+              })
+            })
+          }
         }
       },
       triggerVirtualScrollXEvent (evnt) {
@@ -10045,22 +10081,20 @@ export default defineComponent({
             isScrollXBig = true
           }
 
-          let marginLeft = ''
-          if (scrollXLoad && overflowX) {
-            marginLeft = `${xSpaceLeft}px`
+          if (!(scrollXLoad && overflowX)) {
+            xSpaceLeft = 0
           }
+
           if (headerTableElem) {
-            headerTableElem.style.marginLeft = headerTableElem.getAttribute('xvm') ? marginLeft : ''
+            headerTableElem.style.transform = headerTableElem.getAttribute('xvm') ? `translate(${xSpaceLeft}px, 0px)` : ''
           }
           if (bodyTableElem) {
-            bodyTableElem.style.marginLeft = marginLeft
+            bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`
           }
           if (footerTableElem) {
-            footerTableElem.style.marginLeft = footerTableElem.getAttribute('xvm') ? marginLeft : ''
+            footerTableElem.style.transform = footerTableElem.getAttribute('xvm') ? `translate(${xSpaceLeft}px, 0px)` : ''
           }
 
-          reactData.isScrollXBig = isScrollXBig
-
           const containerList = ['main']
           containerList.forEach(name => {
             const layoutList = ['header', 'body', 'footer']
@@ -10071,6 +10105,11 @@ export default defineComponent({
               }
             })
           })
+
+          reactData.scrollXLeft = xSpaceLeft
+          reactData.scrollXWidth = ySpaceWidth
+          reactData.isScrollXBig = isScrollXBig
+
           const scrollXSpaceEl = refScrollXSpaceElem.value
           if (scrollXSpaceEl) {
             scrollXSpaceEl.style.width = `${ySpaceWidth}px`
@@ -10087,7 +10126,7 @@ export default defineComponent({
       },
       // 更新纵向 Y 可视渲染上下剩余空间大小
       updateScrollYSpace () {
-        const { isAllOverflow, scrollYLoad, expandColumn } = reactData
+        const { isAllOverflow, overflowY, scrollYLoad, expandColumn } = reactData
         const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData
         const { startIndex } = scrollYStore
         const mouseOpts = computeMouseOpts.value
@@ -10097,6 +10136,8 @@ export default defineComponent({
         const defaultRowHeight = computeDefaultRowHeight.value
         const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
         const bodyTableElem = getRefElem(elemStore['main-body-table'])
+        const leftBodyTableElem = getRefElem(elemStore['left-body-table'])
+        const rightbodyTableElem = getRefElem(elemStore['right-body-table'])
         const containerList = ['main', 'left', 'right']
         let ySpaceTop = 0
         let scrollYHeight = 0
@@ -10148,12 +10189,22 @@ export default defineComponent({
           }
           ySpaceHeight = maxYHeight
         }
+        if (!(scrollYLoad && overflowY)) {
+          scrollYTop = 0
+        }
+
+        if (leftBodyTableElem) {
+          leftBodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`
+        }
+        if (bodyTableElem) {
+          bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
+        }
+        if (rightbodyTableElem) {
+          rightbodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`
+        }
+
         containerList.forEach(name => {
           const layoutList = ['header', 'body', 'footer']
-          const tableElem = getRefElem(elemStore[`${name}-body-table`])
-          if (tableElem) {
-            tableElem.style.marginTop = scrollYTop ? `${scrollYTop}px` : ''
-          }
           layoutList.forEach(layout => {
             const ySpaceElem = getRefElem(elemStore[`${name}-${layout}-ySpace`])
             if (ySpaceElem) {
@@ -10161,6 +10212,7 @@ export default defineComponent({
             }
           })
         })
+
         const scrollYSpaceEl = refScrollYSpaceElem.value
         if (scrollYSpaceEl) {
           scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
@@ -11358,6 +11410,9 @@ export default defineComponent({
       if (tableViewportEl) {
         tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent)
       }
+      internalData.cvCacheMaps = {}
+      internalData.prevDragRow = null
+      internalData.prevDragCol = null
       if (resizeObserver) {
         resizeObserver.disconnect()
       }

package/packages/ui/index.ts

@@ -208,7 +208,7 @@ VxeUI.setConfig({
     },
     virtualXConfig: {
       enabled: true,
-      gt: 28,
+      gt: 24,
       preSize: 1,
       oSize: 0
     },
@@ -219,8 +219,8 @@ VxeUI.setConfig({
       oSize: 0
     },
     scrollbarConfig: {
-      width: 14,
-      height: 14
+      // width: 14,
+      // height: 14
     }
   },
   // export: {

package/styles/components/table.scss

@@ -1,7 +1,36 @@
+@use "sass:map";
+@use "sass:list";
 @use '../helpers/baseMixin.scss';
 @use './icon.scss';
 @use './table-module/all.scss';
 
+$btnThemeList: (
+  (
+    name: "primary",
+    textColor: var(--vxe-ui-font-primary-color),
+  ),
+  (
+    name: "success",
+    textColor: var(--vxe-ui-status-success-color),
+  ),
+  (
+    name: "info",
+    textColor: var(--vxe-ui-status-info-color),
+  ),
+  (
+    name: "warning",
+    textColor: var(--vxe-ui-status-warning-color),
+  ),
+  (
+    name: "danger",
+    textColor: var(--vxe-ui-status-danger-color),
+  ),
+  (
+    name: "error",
+    textColor: var(--vxe-ui-status-error-color),
+  )
+);
+
 .vxe-table-slots,
 .vxe-table--file-form {
   display: none;
@@ -792,6 +821,12 @@
   .vxe-cell-title-prefix-icon,
   .vxe-cell-title-suffix-icon {
     cursor: help;
+    @for $index from 0 to list.length($btnThemeList) {
+      $item: list.nth($btnThemeList, $index + 1);
+      &.theme--#{map.get($item, name)} {
+        color: map.get($item, textColor);
+      }
+    }
   }
 }