vxe-table 3.20.1 → 3.20.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.20.1",
+  "version": "3.20.3",
   "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/module/filter/mixin.ts

@@ -113,7 +113,7 @@ export default {
         const tableEl = $xeTable.$refs.refElem as HTMLDivElement
         const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
         const filterOpts = $xeTable.computeFilterOpts
-        const { transfer } = filterOpts
+        const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts
         const currEl = btnEl || colEl
         const tableRect = tableEl.getBoundingClientRect()
         const filterRender = column ? column.filterRender : null
@@ -167,13 +167,21 @@ export default {
               }
             }
           }
-          filterStore.style = {
+          const fStys: Record<string, any> = {
             top: toCssUnit(top),
             left: toCssUnit(left)
           }
+          if (zIndex) {
+            fStys.zIndex = zIndex
+          }
+          filterStore.style = fStys
           // 筛选面板是自适应表格高度
           if (compConf ? !compConf.tableFilterAutoHeight : false) {
             maxHeight = 0
+          } else {
+            if (customMaxHeight) {
+              maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
+            }
           }
           // 判断面板不能大于表格高度
           filterStore.maxHeight = maxHeight

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

@@ -173,7 +173,7 @@ export default {
       const isContentMenu = $xeTable.computeIsContentMenu
       const menuOpts = $xeTable.computeMenuOpts
       const config = menuOpts[type]
-      const { transfer, visibleMethod } = menuOpts
+      const { zIndex, transfer, visibleMethod } = menuOpts
       if (config) {
         const { options, disabled } = config
         if (disabled) {
@@ -204,7 +204,7 @@ export default {
                   selectChild: null,
                   showChild: false,
                   style: {
-                    zIndex: internalData.tZindex,
+                    zIndex: zIndex || internalData.tZindex,
                     top: `${top}px`,
                     left: `${left}px`
                   }

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
   ])
 }
 
@@ -5267,7 +5267,7 @@ const tableMethods: any = {
     const cellValue = getCellValue(row, column)
     let cellLabel = cellValue
     if (formatter || tcFormatter) {
-      let formatData
+      let formatData: Record<string, VxeTableDefines.RowCacheFormatObj> | undefined
       const { fullAllDataRowIdData } = internalData
       const rowid = getRowid($xeTable, row)
       const colid = column.id
@@ -5312,6 +5312,50 @@ const tableMethods: any = {
     }
     return cellLabel
   },
+  updateCellLabel (row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+    if (!column) {
+      return null
+    }
+    const { fullAllDataRowIdData } = internalData
+    const rowid = getRowid($xeTable, row)
+    if (rowid) {
+      const colid = column.id
+      const rowid = getRowid($xeTable, row)
+      const rowRest = fullAllDataRowIdData[rowid]
+      if (rowRest) {
+        const formatData = rowRest.formatData
+        if (formatData) {
+          delete formatData[colid]
+        }
+      }
+    }
+    return $xeTable.getFooterCellLabel(row, column)
+  },
+  clearFormatterCache (isUpdate?: boolean) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { tableData, tableColumn } = reactData
+    const { fullAllDataRowIdData } = internalData
+    XEUtils.each(fullAllDataRowIdData, (rowRest: VxeTableDefines.FooterRowCacheItem) => {
+      if (rowRest.formatData) {
+        rowRest.formatData = undefined
+      }
+    })
+    if (isUpdate) {
+      tableData.forEach(row => {
+        tableColumn.forEach(column => {
+          $xeTable.getCellLabel(row, column)
+        })
+      })
+    }
+    return $xeTable.$nextTick()
+  },
   getFooterCellLabel (row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const reactData = $xeTable as unknown as TableReactData
@@ -5332,7 +5376,7 @@ const tableMethods: any = {
     }
     let cellLabel: any = itemValue
     if (footerFormatter) {
-      let formatData
+      let formatData: Record<string, VxeTableDefines.RowCacheFormatObj> | undefined
       const { footerTableData } = reactData
       const { footerFullDataRowData } = internalData
       const colid = column.id
@@ -5381,6 +5425,49 @@ const tableMethods: any = {
     }
     return cellLabel
   },
+  updateFooterCellLabel (row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+    if (!column) {
+      return null
+    }
+    const { footerTableData } = reactData
+    const { footerFullDataRowData } = internalData
+    const colid = column.id
+    const $rowIndex = footerTableData.indexOf(row)
+    const rowRest = footerFullDataRowData[$rowIndex]
+    if (rowRest) {
+      const formatData = rowRest.formatData
+      if (formatData) {
+        delete formatData[colid]
+      }
+    }
+    return $xeTable.getFooterCellLabel(row, column)
+  },
+  clearFooterFormatterCache (isUpdate?: boolean) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { tableData, tableColumn } = reactData
+    const { footerFullDataRowData } = internalData
+    XEUtils.each(footerFullDataRowData, (rowRest: VxeTableDefines.FooterRowCacheItem) => {
+      if (rowRest.formatData) {
+        rowRest.formatData = undefined
+      }
+    })
+    if (isUpdate) {
+      tableData.forEach(row => {
+        tableColumn.forEach(column => {
+          $xeTable.getFooterCellLabel(row, column)
+        })
+      })
+    }
+    return $xeTable.$nextTick()
+  },
   /**
    * 检查是否为临时行数据
    */
@@ -11435,7 +11522,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 +11586,7 @@ const tableMethods: any = {
       }
       internalData.lastScrollTop = scrollTop
     }
-    reactData.lastScrollTime = Date.now()
+    internalData.lastSTime = Date.now()
     const evntParams = {
       source: sourceType,
       scrollTop,
@@ -11766,7 +11852,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 +12360,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/packages/ui/index.ts

@@ -161,7 +161,8 @@ VxeUI.setConfig({
       // transfer: false,
       destroyOnClose: true,
       multiple: true,
-      showIcon: true
+      showIcon: true,
+      maxHeight: 280
     },
     floatingFilterConfig: {
       // enabled: false

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);