vxe-table 3.20.0 → 3.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.20.0",
+  "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/column.ts

@@ -138,7 +138,7 @@ export const columnProps = {
   contentRender: Object,
 
   // 聚合函数
-  aggFunc: [String, Boolean] as PropType<VxeColumnPropTypes.AggFunc>,
+  aggFunc: [Boolean, String] as PropType<VxeColumnPropTypes.AggFunc>,
   // 将单元格复制到剪贴板
   copyMethod: Function as PropType<VxeColumnPropTypes.CopyMethod>,
   // 将剪贴单元格的值清除

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
   ])
 }
 
@@ -8503,6 +8503,7 @@ const tableMethods: any = {
     if (!checkMethod || checkMethod({ $table: $xeTable, row })) {
       let newValue = row
       let isChange = oldValue !== newValue
+      const selected = !isChange
       if (isChange) {
         handleCheckedRadioRow($xeTable, newValue)
       } else if (!strict) {
@@ -8513,7 +8514,7 @@ const tableMethods: any = {
         }
       }
       if (isChange) {
-        $xeTable.dispatchEvent('radio-change', { oldValue, newValue, ...params }, evnt)
+        $xeTable.dispatchEvent('radio-change', { oldValue, newValue, selected, ...params }, evnt)
       }
     }
   },
@@ -8527,7 +8528,7 @@ const tableMethods: any = {
     const columnOpts = $xeTable.computeColumnOpts
     const currentColumnOpts = $xeTable.computeCurrentColumnOpts
     const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod as any
-    const { column: newValue } = params
+    let { column: newValue } = params
     const { trigger, strict } = currentColumnOpts
     if (trigger === 'manual') {
       return
@@ -8538,15 +8539,16 @@ const tableMethods: any = {
       if (strict) {
         $xeTable.setCurrentColumn(newValue)
       } else {
-        isChange = true
-        if (selected) {
+        isChange = oldValue === newValue
+        if (isChange) {
+          newValue = null as any
           $xeTable.clearCurrentColumn()
         } else {
           $xeTable.setCurrentColumn(newValue)
         }
       }
       if (isChange) {
-        $xeTable.dispatchEvent('current-column-change', { oldValue, newValue, ...params }, evnt)
+        $xeTable.dispatchEvent('current-column-change', { oldValue, newValue, selected, ...params }, evnt)
       }
     } else {
       $xeTable.dispatchEvent('current-column-disabled', params, evnt)
@@ -8560,7 +8562,7 @@ const tableMethods: any = {
     const rowOpts = $xeTable.computeRowOpts
     const currentRowOpts = $xeTable.computeCurrentRowOpts
     const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod as any
-    const { row: newValue } = params
+    let { row: newValue } = params
     const { trigger, strict } = currentRowOpts
     if (trigger === 'manual') {
       return
@@ -8571,17 +8573,18 @@ const tableMethods: any = {
       if (strict) {
         $xeTable.setCurrentRow(newValue)
       } else {
-        isChange = true
-        if (selected) {
+        isChange = oldValue === newValue
+        if (isChange) {
+          newValue = null
           $xeTable.clearCurrentRow()
         } else {
           $xeTable.setCurrentRow(newValue)
         }
       }
       if (isChange) {
-        $xeTable.dispatchEvent('current-row-change', { oldValue, newValue, ...params }, evnt)
+        $xeTable.dispatchEvent('current-row-change', { oldValue, newValue, selected, ...params }, evnt)
         // 已废弃
-        $xeTable.dispatchEvent('current-change', { oldValue, newValue, ...params }, evnt)
+        $xeTable.dispatchEvent('current-change', { oldValue, newValue, selected, ...params }, evnt)
       }
     } else {
       $xeTable.dispatchEvent('current-row-disabled', params, evnt)
@@ -11432,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
@@ -11497,7 +11499,7 @@ const tableMethods: any = {
       }
       internalData.lastScrollTop = scrollTop
     }
-    reactData.lastScrollTime = Date.now()
+    internalData.lastSTime = Date.now()
     const evntParams = {
       source: sourceType,
       scrollTop,
@@ -11763,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
 
@@ -12271,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);