vxe-table 3.20.1 → 3.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.20.1",
+  "version": "3.20.2",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/table/src/body.ts

@@ -17,10 +17,12 @@ const renderType = 'body'
 const isVMScrollProcess = ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) => {
   const tableProps = $xeTable
   const tableReactData = $xeTable as unknown as TableReactData
+  const tableInternalData = $xeTable as unknown as TableInternalData
 
   const { delayHover } = tableProps
-  const { lastScrollTime, isDragResize } = tableReactData
-  return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
+  const { isDragResize } = tableReactData
+  const { lastSTime } = tableInternalData
+  return !!(isDragResize || (lastSTime && Date.now() < lastSTime + (delayHover as number)))
 }
 
 function renderLine (h: CreateElement, $xeTable : VxeTableConstructor & VxeTablePrivateMethods, rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number): VxeComponentSlotType[] {

package/packages/table/src/methods.ts

@@ -3495,7 +3495,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
       if (reactData.expandColumn && expandOpts.mode !== 'fixed') {
         errLog('vxe.error.notConflictProp', ['column.type="expand', 'expand-config.mode="fixed"'])
       }
-      if (virtualYOpts.mode === 'scroll' && expandOpts.mode === 'fixed') {
+      if (virtualYOpts.mode === 'scroll' && reactData.expandColumn && expandOpts.mode === 'fixed') {
         warnLog('vxe.error.notConflictProp', ['virtual-y-config.mode=scroll', 'expand-config.mode=inside'])
       }
       // if (showOverflow) {
@@ -4023,7 +4023,7 @@ function handleSyncScroll ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   return Promise.all([
     xRest,
     yRest,
-    $xeTable.updateCellAreas()
+    scrollXLoad || scrollYLoad ? $xeTable.updateCellAreas() : null
   ])
 }
 
@@ -11435,7 +11435,6 @@ const tableMethods: any = {
   handleScrollEvent (evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number, params: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const props = $xeTable
-    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
     const { highlightHoverRow } = props
@@ -11500,7 +11499,7 @@ const tableMethods: any = {
       }
       internalData.lastScrollTop = scrollTop
     }
-    reactData.lastScrollTime = Date.now()
+    internalData.lastSTime = Date.now()
     const evntParams = {
       source: sourceType,
       scrollTop,
@@ -11766,7 +11765,7 @@ const tableMethods: any = {
       return
     }
 
-    const wheelSpeed = getWheelSpeed(reactData.lastScrollTime)
+    const wheelSpeed = getWheelSpeed(internalData.lastSTime)
     const deltaTop = shiftKey ? 0 : (deltaY * wheelSpeed)
     const deltaLeft = (shiftKey ? (deltaX || deltaY) : deltaX) * wheelSpeed
 
@@ -12274,14 +12273,18 @@ const tableMethods: any = {
       setScrollLeft(bodyScrollElem, scrollLeft)
       setScrollLeft(headerScrollElem, scrollLeft)
       setScrollLeft(footerScrollElem, scrollLeft)
-      loadScrollXData($xeTable)
+      if (reactData.scrollXLoad) {
+        loadScrollXData($xeTable)
+      }
     }
     if (XEUtils.isNumber(scrollTop)) {
       setScrollTop(yHandleEl, scrollTop)
       setScrollTop(bodyScrollElem, scrollTop)
       setScrollTop(leftScrollElem, scrollTop)
       setScrollTop(rightScrollElem, scrollTop)
-      loadScrollYData($xeTable)
+      if (reactData.scrollYLoad) {
+        loadScrollYData($xeTable)
+      }
     }
     return new Promise<void>(resolve => {
       setTimeout(() => {

package/packages/table/src/table.ts

@@ -1,7 +1,7 @@
 import { CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { getFuncText, isEnableConf } from '../../ui/src/utils'
-import { initTpImg } from '../../ui/src/dom'
+import { initTpImg, toCssUnit } from '../../ui/src/dom'
 import { createReactData, createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util'
 import { VxeUI } from '../../ui'
 import methods from './methods'
@@ -26,7 +26,7 @@ import keyboardMixin from '../module/keyboard/mixin'
 import validatorMixin from '../module/validator/mixin'
 import customMixin from '../module/custom/mixin'
 
-import type { VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
+import type { VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType } from 'vxe-pc-ui'
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes, TableInternalData, TableReactData, VxeTableDefines } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
@@ -1232,6 +1232,20 @@ export default {
       }
       return ''
     },
+    computeTableStyle () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      const { width, height } = scrollbarOpts
+      const tStys: VxeComponentStyleType = {}
+      if (width) {
+        tStys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(width)
+      }
+      if (height) {
+        tStys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(height)
+      }
+      return tStys
+    },
     computeTableRowExpandedList () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const reactData = $xeTable as unknown as TableReactData
@@ -2077,6 +2091,7 @@ export default {
       footer: slots.footerTooltip || slots['footer-tooltip']
     }
     const currTooltipSlot = tooltipStore.visible && tooltipStore.type ? tipSlots[tooltipStore.type] : null
+    const tableStyle = ($xeTable as any).computeTableStyle as VxeComponentStyleType
     const rowDragOpts = $xeTable.computeRowDragOpts
     const tableTipConfig = $xeTable.computeTableTipConfig
     const validTipConfig = $xeTable.computeValidTipConfig
@@ -2148,6 +2163,7 @@ export default {
         'is--virtual-x': scrollXLoad,
         'is--virtual-y': scrollYLoad
       }],
+      style: tableStyle,
       attrs: {
         spellcheck: false
       },

package/packages/table/src/util.ts

@@ -137,6 +137,8 @@ export function createInternalData (): TableInternalData {
     teleportToWrapperElem: null,
     popupToWrapperElem: null,
 
+    lastSTime: 0,
+
     inited: false,
     tooltipTimeout: null,
     initStatus: false,
@@ -167,8 +169,6 @@ export function createReactData (): TableReactData {
     scrollbarWidth: 0,
     // 横向滚动条的高度
     scrollbarHeight: 0,
-    // 最后滚动时间戳
-    lastScrollTime: 0,
     // 行高
     rowHeight: 0,
     // 表格父容器的高度

package/styles/components/table.scss

@@ -912,7 +912,7 @@ $btnThemeList: (
   .vxe-table--scroll-x-handle {
     overflow-y: hidden;
     overflow-x: scroll;
-    height: 18px;
+    height: var(--vxe-ui-table-view-scrollbar-height);
   }
   .vxe-table--scroll-y-handle,
   .vxe-table--scroll-y-wrapper {
@@ -924,7 +924,7 @@ $btnThemeList: (
   .vxe-table--scroll-y-handle {
     overflow-y: scroll;
     overflow-x: hidden;
-    width: 18px;
+    width: var(--vxe-ui-table-view-scrollbar-width);
     height: 100%;
   }
   .vxe-table--scroll-x-space {

package/styles/theme/base.scss

@@ -78,6 +78,9 @@
 
   --vxe-ui-table-menu-item-width: 198px;
 
+  --vxe-ui-table-view-scrollbar-width: 18px;
+  --vxe-ui-table-view-scrollbar-height: 18px;
+
   --vxe-ui-table-validate-error-color: #f56c6c;
   --vxe-ui-table-validate-error-cell-background-color: rgba(245, 108,108, 0.1);
   --vxe-ui-table-validate-error-theme-normal-background-color: var(--vxe-ui-layout-background-color);