vxe-table 4.18.1 → 4.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.18.1",
+  "version": "4.18.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/grid/src/grid.ts

@@ -19,7 +19,7 @@ import type { VxeTableMethods, VxeGridConstructor, VxeGridEmits, GridReactData,
 const { getConfig, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
 
 const tableComponentPropKeys = Object.keys(tableProps) as (keyof VxeTableProps)[]
-const tableComponentMethodKeys: (keyof VxeTableMethods)[] = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isRemoveByRow', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeRowChildren', 'getTreeRowLevel', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'recalcRowHeight', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'hasPendingByRow', 'isPendingByRow', 'getPendingRecords', 'clearPendingRow', 'setFilterByEvent', 'sort', 'setSort', 'setSortByEvent', 'clearSort', 'clearSortByEvent', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'clearFilterByEvent', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'getScrollData', 'scrollTo', 'scrollToStartRow', 'scrollToEndRow', 'scrollToRow', 'scrollToStartColumn', 'scrollToEndColumn', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'setMergeHeaderCells', 'removeMergeHeaderCells', 'getMergeHeaderCells', 'clearMergeHeaderCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'setRowGroupExpand', 'setRowGroupExpandByField', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'getCellElement', 'focus', 'blur', 'connect', 'connectToolbar']
+const tableComponentMethodKeys: (keyof VxeTableMethods)[] = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isRemoveByRow', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeRowChildren', 'getTreeRowLevel', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'recalcRowHeight', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'hasPendingByRow', 'isPendingByRow', 'getPendingRecords', 'clearPendingRow', 'setFilterByEvent', 'sort', 'setSort', 'setSortByEvent', 'clearSort', 'clearSortByEvent', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'clearFilterByEvent', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'getScrollData', 'scrollTo', 'scrollToStartRow', 'scrollToEndRow', 'scrollToRow', 'scrollToStartColumn', 'scrollToEndColumn', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'setMergeHeaderCells', 'removeMergeHeaderCells', 'getMergeHeaderCells', 'clearMergeHeaderCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'setRowGroupExpand', 'setRowGroupExpandByField', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'updateCellLabel', 'clearFormatterCache', 'getFooterCellLabel', 'updateFooterCellLabel', 'clearFooterFormatterCache', 'getCellElement', 'focus', 'blur', 'connect', 'connectToolbar']
 
 function createReactData (): GridReactData {
   return {

package/packages/table/module/filter/hook.ts

@@ -42,7 +42,7 @@ hooks.add('tableFilterModule', {
           const tableEl = refElem.value
           const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
           const filterOpts = computeFilterOpts.value
-          const { transfer } = filterOpts
+          const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts
           const currEl = btnEl || colEl
           const tableRect = tableEl.getBoundingClientRect()
           const filterRender = column ? column.filterRender : null
@@ -100,13 +100,21 @@ hooks.add('tableFilterModule', {
                 }
               }
             }
-            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/hook.ts

@@ -31,7 +31,7 @@ hooks.add('tableMenuModule', {
       const isContentMenu = computeIsContentMenu.value
       const menuOpts = computeMenuOpts.value
       const config = menuOpts[type]
-      const { transfer, visibleMethod } = menuOpts
+      const { zIndex, transfer, visibleMethod } = menuOpts
       if (config) {
         const { options, disabled } = config
         if (disabled) {
@@ -65,7 +65,7 @@ hooks.add('tableMenuModule', {
                   selectChild: null,
                   showChild: false,
                   style: {
-                    zIndex: internalData.tZindex,
+                    zIndex: zIndex || internalData.tZindex,
                     top: `${top}px`,
                     left: `${left}px`
                   }

package/packages/table/src/body.ts

@@ -43,8 +43,9 @@ export default defineVxeComponent({
     // 滚动、拖动过程中不需要触发
     const isVMScrollProcess = () => {
       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)))
     }
 
     const renderLine = (rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number): VxeComponentSlotType[] => {

package/packages/table/src/table.ts

@@ -30,7 +30,7 @@ import '../module/validator/hook'
 import '../module/custom/hook'
 import '../render'
 
-import type { VxeTooltipInstance, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType } from 'vxe-pc-ui'
+import type { VxeTooltipInstance, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType, VxeComponentStyleType } from 'vxe-pc-ui'
 import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes, VxeTableCustomPanelConstructor } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
@@ -615,6 +615,19 @@ export default defineVxeComponent({
       return ''
     })
 
+    const computeTableStyle = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      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
+    })
+
     const computeTableRowExpandedList = computed(() => {
       const { tableData, rowExpandedFlag, expandColumn, rowGroupExpandedFlag, treeExpandedFlag } = reactData
       const { visibleDataRowIdData, rowExpandedMaps } = internalData
@@ -3755,7 +3768,7 @@ export default defineVxeComponent({
           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) {
@@ -4462,7 +4475,7 @@ export default defineVxeComponent({
       return Promise.all([
         xRest,
         yRest,
-        $xeTable.updateCellAreas()
+        scrollXLoad || scrollYLoad ? $xeTable.updateCellAreas() : null
       ])
     }
 
@@ -5254,7 +5267,7 @@ export default defineVxeComponent({
         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
@@ -5299,6 +5312,43 @@ export default defineVxeComponent({
         }
         return cellLabel
       },
+      updateCellLabel (row, fieldOrColumn) {
+        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) {
+        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 nextTick()
+      },
       getFooterCellLabel (row, fieldOrColumn) {
         const column = handleFieldOrColumn($xeTable, fieldOrColumn)
         if (!column) {
@@ -5315,7 +5365,7 @@ export default defineVxeComponent({
         }
         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
@@ -5364,6 +5414,41 @@ export default defineVxeComponent({
         }
         return cellLabel
       },
+      updateFooterCellLabel (row, fieldOrColumn) {
+        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) {
+        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 nextTick()
+      },
       /**
        * 检查是否为临时行数据
        */
@@ -7299,14 +7384,18 @@ export default defineVxeComponent({
           setScrollLeft(bodyScrollElem, scrollLeft)
           setScrollLeft(headerScrollElem, scrollLeft)
           setScrollLeft(footerScrollElem, scrollLeft)
-          loadScrollXData()
+          if (reactData.scrollXLoad) {
+            loadScrollXData()
+          }
         }
         if (XEUtils.isNumber(scrollTop)) {
           setScrollTop(yHandleEl, scrollTop)
           setScrollTop(bodyScrollElem, scrollTop)
           setScrollTop(leftScrollElem, scrollTop)
           setScrollTop(rightScrollElem, scrollTop)
-          loadScrollYData()
+          if (reactData.scrollYLoad) {
+            loadScrollYData()
+          }
         }
         return new Promise<void>(resolve => {
           setTimeout(() => {
@@ -11625,7 +11714,7 @@ export default defineVxeComponent({
           }
           internalData.lastScrollTop = scrollTop
         }
-        reactData.lastScrollTime = Date.now()
+        internalData.lastSTime = Date.now()
         const evntParams = {
           source: sourceType,
           scrollTop,
@@ -11870,7 +11959,7 @@ export default defineVxeComponent({
           return
         }
 
-        const wheelSpeed = getWheelSpeed(reactData.lastScrollTime)
+        const wheelSpeed = getWheelSpeed(internalData.lastSTime)
         const deltaTop = shiftKey ? 0 : (deltaY * wheelSpeed)
         const deltaLeft = (shiftKey ? (deltaX || deltaY) : deltaX) * wheelSpeed
 
@@ -12873,6 +12962,7 @@ export default defineVxeComponent({
         footer: slots.footerTooltip || slots['footer-tooltip']
       }
       const currTooltipSlot = tooltipStore.visible && tooltipStore.type ? tipSlots[tooltipStore.type] : null
+      const tableStyle = computeTableStyle.value
       const rowDragOpts = computeRowDragOpts.value
       const tableTipConfig = computeTableTipConfig.value
       const validTipConfig = computeValidTipConfig.value
@@ -12944,6 +13034,7 @@ export default defineVxeComponent({
           'is--virtual-x': scrollXLoad,
           'is--virtual-y': scrollYLoad
         }],
+        style: tableStyle,
         spellcheck: false,
         ...tbOns
       }, [

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

@@ -160,7 +160,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);