vxe-table 3.15.12 → 3.15.14

package/packages/table/module/menu/panel.ts

@@ -40,6 +40,7 @@ export default {
           const hasChildMenus = item.children && item.children.some((child: any) => child.visible !== false)
           const prefixOpts = Object.assign({}, item.prefixConfig)
           const suffixOpts = Object.assign({}, item.suffixConfig)
+          const menuContent = getFuncText(item.name)
           return item.visible === false
             ? null
             : h('li', {
@@ -72,8 +73,11 @@ export default {
                   prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : _e()
                 ]),
                 h('span', {
-                  class: 'vxe-context-menu--link-content'
-                }, getFuncText(item.name)),
+                  class: 'vxe-context-menu--link-content',
+                  attrs: {
+                    title: menuContent
+                  }
+                }, menuContent),
                 h('div', {
                   class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
                 }, [
@@ -91,6 +95,7 @@ export default {
                 }, item.children.map((child: any, cIndex: any) => {
                   const childPrefixOpts = Object.assign({}, child.prefixConfig)
                   const childSuffixOpts = Object.assign({}, child.suffixConfig)
+                  const childMenuContent = getFuncText(child.name)
                   return child.visible === false
                     ? null
                     : h('li', {
@@ -123,8 +128,11 @@ export default {
                           childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : _e()
                         ]),
                         h('span', {
-                          class: 'vxe-context-menu--link-content'
-                        }, getFuncText(child.name)),
+                          class: 'vxe-context-menu--link-content',
+                          attrs: {
+                            title: childMenuContent
+                          }
+                        }, childMenuContent),
                         h('div', {
                           class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
                         }, [

package/packages/table/src/cell.ts

@@ -15,7 +15,7 @@ function renderTitlePrefixIcon (h: CreateElement, params: VxeTableDefines.CellRe
   const titlePrefix = column.titlePrefix || column.titleHelp
   if (titlePrefix) {
     return h('i', {
-      class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
+      class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : '', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
       on: {
         mouseenter (evnt: any) {
           $table.triggerHeaderTitleEvent(evnt, titlePrefix, params)
@@ -34,7 +34,7 @@ function renderTitleSuffixIcon (h: CreateElement, params: VxeTableDefines.CellRe
   const titleSuffix = column.titleSuffix
   if (titleSuffix) {
     return h('i', {
-      class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
+      class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : '', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
       on: {
         mouseenter (evnt: any) {
           $table.triggerHeaderTitleEvent(evnt, titleSuffix, params)

package/packages/table/src/methods.ts

@@ -2513,13 +2513,13 @@ function calcScrollbar ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   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
     }
     reactData.overflowX = overflowX
 
@@ -2724,6 +2724,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
   scrollYStore.endIndex = 1
   scrollXStore.startIndex = 0
   scrollXStore.endIndex = 1
+  internalData.cvCacheMaps = {}
   reactData.isRowLoading = true
   reactData.scrollVMLoading = false
   internalData.treeExpandedMaps = {}
@@ -3176,7 +3177,7 @@ function lazyScrollXData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods
 
   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)
   }
@@ -3196,7 +3197,7 @@ function lazyScrollYData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods
 
   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)
   }
@@ -9549,8 +9550,8 @@ const Methods = {
     if (isRollX) {
       evnt.preventDefault()
       internalData.inWheelScroll = true
-      wheelScrollLeftTo(scrollLeft, (offsetLeft: number) => {
-        const currLeftNum = offsetLeft
+      if (browseObj['-moz'] || browseObj.safari) {
+        const currLeftNum = scrollLeft
         setScrollLeft(xHandleEl, currLeftNum)
         setScrollLeft(bodyScrollElem, currLeftNum)
         setScrollLeft(headerScrollElem, currLeftNum)
@@ -9562,13 +9563,27 @@ const Methods = {
           type: 'table',
           fixed: ''
         })
-      })
+      } else {
+        wheelScrollLeftTo(scrollLeft, (offsetLeft: number) => {
+          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()
-      wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
-        const currTopNum = bodyScrollElem.scrollTop + offsetTop
-        internalData.inWheelScroll = true
+      if (browseObj['-moz'] || browseObj.safari) {
+        const currTopNum = scrollTop
         setScrollTop(yHandleEl, currTopNum)
         setScrollTop(bodyScrollElem, currTopNum)
         setScrollTop(leftScrollElem, currTopNum)
@@ -9581,7 +9596,24 @@ const Methods = {
           type: 'table',
           fixed: ''
         })
-      })
+      } else {
+        wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
+          const currTopNum = bodyScrollElem.scrollTop + offsetTop
+          internalData.inWheelScroll = true
+          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: Event) {
@@ -9721,22 +9753,20 @@ const Methods = {
         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']
@@ -9747,6 +9777,10 @@ const Methods = {
           }
         })
       })
+
+      reactData.scrollXLeft = xSpaceLeft
+      reactData.scrollXWidth = ySpaceWidth
+      reactData.isScrollXBig = isScrollXBig
       const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem as HTMLDivElement
       if (scrollXSpaceEl) {
         scrollXSpaceEl.style.width = `${ySpaceWidth}px`
@@ -9787,6 +9821,8 @@ const Methods = {
     const defaultRowHeight = $xeTable.computeDefaultRowHeight
     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
@@ -9838,12 +9874,19 @@ const Methods = {
       }
       ySpaceHeight = maxYHeight
     }
+
+    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) {
@@ -9851,6 +9894,7 @@ const Methods = {
         }
       })
     })
+
     const scrollYSpaceEl = $xeTable.$refs.refScrollYSpaceElem as HTMLDivElement
     if (scrollYSpaceEl) {
       scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''

package/packages/table/src/table.ts

@@ -1509,6 +1509,8 @@ export default {
       // 已删除行
       removeRowMaps: {},
 
+      cvCacheMaps: {},
+
       swYSize: 0,
       swYInterval: 0,
       swYTotal: 0
@@ -1821,11 +1823,15 @@ export default {
   },
   beforeDestroy () {
     const $xeTable = this
+    const internalData = $xeTable as unknown as TableInternalData
 
     const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
     if (tableViewportEl) {
       tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent)
     }
+    internalData.cvCacheMaps = {}
+    internalData.prevDragRow = null
+    internalData.prevDragCol = null
     if (this.$resize) {
       this.$resize.disconnect()
     }

package/packages/ui/index.ts

@@ -209,7 +209,7 @@ VxeUI.setConfig({
     },
     virtualXConfig: {
       enabled: true,
-      gt: 28,
+      gt: 24,
       preSize: 0,
       oSize: 1
     },
@@ -220,8 +220,8 @@ VxeUI.setConfig({
       oSize: 2
     },
     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);
+      }
+    }
   }
 }