vxe-table 4.13.1 → 4.13.3

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

@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
 import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
-import { toCssUnit, triggerEvent } from '../../../ui/src/dom'
+import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
 import type { TableFilterMethods, TableFilterPrivateMethods } from '../../../../types'
@@ -76,6 +76,9 @@ hooks.add('tableFilterModule', {
           filterStore.visible = false
         } else {
           const el = refElem.value
+          const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
+          const filterOpts = computeFilterOpts.value
+          const { transfer } = filterOpts
           const tableRect = el.getBoundingClientRect()
           const btnElem = evnt.currentTarget as HTMLDivElement
           const { filters, filterMultiple, filterRender } = column
@@ -107,28 +110,42 @@ hooks.add('tableFilterModule', {
               return
             }
             const tableFilter = refTableFilter.value
-            const filterWrapperElem = tableFilter ? tableFilter.$el as HTMLDivElement : null
+            const filterWrapperElem = tableFilter ? tableFilter.getRefMaps().refElem.value as HTMLDivElement : null
             if (!filterWrapperElem) {
               return
             }
             const btnRect = btnElem.getBoundingClientRect()
-            const filterWidth = filterWrapperElem.offsetWidth
             const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
             const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
+            const filterWidth = filterWrapperElem.offsetWidth
             const centerWidth = filterWidth / 2
-            let left = btnRect.left - tableRect.left - centerWidth
-            const top = btnRect.top - tableRect.top + btnElem.clientHeight
-            // 判断面板不能大于表格高度
-            const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
-            if (left < 1) {
-              left = 1
-            } else if (left > (el.clientWidth - filterWidth - 1)) {
-              left = el.clientWidth - filterWidth - 1
+            let left = 0
+            let top = 0
+            let maxHeight = 0
+            if (transfer) {
+              left = btnRect.left - centerWidth + scrollLeft
+              top = btnRect.top + btnElem.clientHeight + scrollTop
+              maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28))
+              if (left < 16) {
+                left = 16
+              } else if (left > (visibleWidth - filterWidth - 16)) {
+                left = visibleWidth - filterWidth - 16
+              }
+            } else {
+              left = btnRect.left - tableRect.left - centerWidth
+              top = btnRect.top - tableRect.top + btnElem.clientHeight
+              maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
+              if (left < 1) {
+                left = 1
+              } else if (left > (el.clientWidth - filterWidth - 1)) {
+                left = el.clientWidth - filterWidth - 1
+              }
             }
             filterStore.style = {
               top: toCssUnit(top),
               left: toCssUnit(left)
             }
+            // 判断面板不能大于表格高度
             filterStore.maxHeight = maxHeight
           })
         }

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

@@ -1,8 +1,9 @@
-import { defineComponent, h, computed, inject } from 'vue'
+import { defineComponent, h, ref, computed, inject, Teleport } from 'vue'
 import { VxeUI } from '../../../ui'
 import { formatText, isEnableConf } from '../../../ui/src/utils'
 import { getPropClass } from '../../../ui/src/dom'
 import { getSlotVNs } from '../../../ui/src/vn'
+import XEUtils from 'xe-utils'
 
 import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../../../../types'
 
@@ -13,11 +14,26 @@ export default defineComponent({
   props: {
     filterStore: Object as any
   },
-  setup (props) {
+  setup (props, context) {
+    const xID = XEUtils.uniqueId()
+
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
     const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable
     const { computeFilterOpts } = getComputeMaps()
 
+    const refElem = ref<HTMLDivElement>()
+
+    const refMaps = {
+      refElem
+    }
+
+    const $xeFilterPanel: any = {
+      xID,
+      props,
+      context,
+      getRefMaps: () => refMaps
+    }
+
     const computeHasCheckOption = computed(() => {
       const { filterStore } = props
       return filterStore && filterStore.options.some((option: any) => option.checked)
@@ -78,7 +94,7 @@ export default defineComponent({
      * Publish methods
      *************************/
 
-    const $panel = {
+    const filterPanelMethods = {
       changeRadioOption,
       changeMultipleOption,
       changeAllOption,
@@ -86,13 +102,14 @@ export default defineComponent({
       confirmFilter,
       resetFilter
     }
+    Object.assign($xeFilterPanel, filterPanelMethods)
 
     const renderOptions = (filterRender: any, compConf: any) => {
       const { filterStore } = props
       const { column, multiple, maxHeight } = filterStore
       const slots = column ? column.slots : null
       const filterSlot = slots ? slots.filter : null
-      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable })
+      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable })
       const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
       if (filterSlot) {
         return [
@@ -212,24 +229,39 @@ export default defineComponent({
       const filterRender = column ? column.filterRender : null
       const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
       const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : ''
-      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable })
+      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable })
+      const tableProps = $xeTable.props
+      const { computeSize } = $xeTable.getComputeMaps()
+      const vSize = computeSize.value
       const filterOpts = computeFilterOpts.value
-      const { destroyOnClose } = filterOpts
-      return h('div', {
-        class: [
-          'vxe-table--filter-wrapper',
-          'filter--prevent-default',
-          getPropClass(filterClassName, params),
-          {
-            'is--animat': $xeTable.props.animat,
-            'is--multiple': multiple,
-            'is--active': visible
-          }
-        ],
-        style: filterStore.style
-      }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
+      const { transfer, destroyOnClose } = filterOpts
+      return h(Teleport, {
+        to: 'body',
+        disabled: !transfer
+      }, [
+        h('div', {
+          ref: refElem,
+          class: [
+            'vxe-table--filter-wrapper',
+            'filter--prevent-default',
+            getPropClass(filterClassName, params),
+            {
+              [`size--${vSize}`]: vSize,
+              'is--animat': tableProps.animat,
+              'is--multiple': multiple,
+              'is--active': visible
+            }
+          ],
+          style: filterStore.style
+        }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
+      ])
     }
 
-    return renderVN
+    $xeFilterPanel.renderVN = renderVN
+
+    return $xeFilterPanel
+  },
+  render () {
+    return this.renderVN()
   }
 })

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

@@ -224,7 +224,7 @@ hooks.add('tableMenuModule', {
             }
           }
         }
-        if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
+        if (tableFilter && !getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value).flag) {
           $xeTable.closeFilter()
         }
         menuMethods.closeMenu()

package/packages/table/src/body.ts

@@ -27,7 +27,7 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyScroll = ref() as Ref<HTMLDivElement>
@@ -102,7 +102,7 @@ export default defineComponent({
     ) => {
       const $xeGrid = $xeTable.xeGrid
 
-      const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
+      const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
       const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData
       const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore } = tableInternalData
       const cellOpts = computeCellOpts.value
@@ -111,6 +111,8 @@ export default defineComponent({
       const editOpts = computeEditOpts.value
       const tooltipOpts = computeTooltipOpts.value
       const resizableOpts = computeResizableOpts.value
+      const virtualXOpts = computeVirtualXOpts.value
+      const virtualYOpts = computeVirtualYOpts.value
       const { isAllColumnDrag, isAllRowDrag } = resizableOpts
       const rowOpts = computeRowOpts.value
       const rowDragOpts = computeRowDragOpts.value
@@ -282,9 +284,9 @@ export default defineComponent({
       let isVNPreEmptyStatus = false
       if (!isMergeCell) {
         if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-          if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+          if (scrollYLoad && !treeConfig && !virtualYOpts.immediate && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
             isVNPreEmptyStatus = true
-          } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          } else if (scrollXLoad && !virtualXOpts.immediate && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
             isVNPreEmptyStatus = true
           }
         }

package/packages/table/src/footer.ts

@@ -34,7 +34,7 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refFooterScroll = ref() as Ref<HTMLDivElement>
@@ -50,6 +50,7 @@ export default defineComponent({
       const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
       const { scrollXLoad, scrollYLoad, overflowX, currentColumn } = tableReactData
       const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData
+      const virtualXOpts = computeVirtualXOpts.value
       const tooltipOpts = computeTooltipOpts.value
       const resizableOpts = computeResizableOpts.value
       const { isAllColumnDrag } = resizableOpts
@@ -162,7 +163,7 @@ export default defineComponent({
 
         let isVNPreEmptyStatus = false
         if (!isMergeCell) {
-          if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
             isVNPreEmptyStatus = true
           }
         }

package/packages/table/src/header.ts

@@ -25,7 +25,7 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
+    const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts } = $xeTable.getComputeMaps()
 
     const headerColumn = ref([] as VxeTableDefines.ColumnInfo[][])
 
@@ -49,6 +49,7 @@ export default defineComponent({
       const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
       const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX } = tableReactData
       const { fullColumnIdData, scrollXStore } = tableInternalData
+      const virtualXOpts = computeVirtualXOpts.value
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
       const cellOpts = computeCellOpts.value
@@ -120,7 +121,7 @@ export default defineComponent({
         let isVNPreEmptyStatus = false
         if (!isGroup) {
           if (!dragCol || dragCol.id !== colid) {
-            if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+            if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
               isVNPreEmptyStatus = true
             }
           }

package/packages/table/src/table.ts

@@ -402,7 +402,7 @@ export default defineComponent({
     const refCommTooltip = ref() as Ref<VxeTooltipInstance>
     const refValidTooltip = ref() as Ref<VxeTooltipInstance>
     const refTableMenu = ref() as Ref<any>
-    const refTableFilter = ref() as Ref<ComponentPublicInstance>
+    const refTableFilter = ref() as Ref<any>
     const refTableCustom = ref() as Ref<ComponentPublicInstance>
 
     const refTableViewportElem = ref<HTMLDivElement>()
@@ -2975,7 +2975,12 @@ export default defineComponent({
         $xeTable.checkSelectionStatus()
         return new Promise<void>(resolve => {
           nextTick()
-            .then(() => $xeTable.recalculate())
+            .then(() => handleRecalculateLayout(false))
+            .then(() => {
+              calcCellHeight()
+              updateRowOffsetTop()
+              return handleRecalculateLayout(false)
+            })
             .then(() => {
               let targetScrollLeft = lastScrollLeft
               let targetScrollTop = lastScrollTop
@@ -2989,8 +2994,7 @@ export default defineComponent({
                 targetScrollTop = 0
               }
               reactData.isRowLoading = false
-              calcCellHeight()
-              updateRowOffsetTop()
+              handleRecalculateLayout(false)
               // 是否变更虚拟滚动
               if (oldScrollYLoad === sYLoad) {
                 restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -3289,8 +3293,8 @@ export default defineComponent({
       const childrenField = treeOpts.children || treeOpts.childrenField
       const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
       const result: any[] = []
-      const columnIndex = tableMethods.getColumnIndex(treeNodeColumn)
-      const $columnIndex = tableMethods.getVMColumnIndex(treeNodeColumn)
+      const columnIndex = $xeTable.getColumnIndex(treeNodeColumn)
+      const $columnIndex = $xeTable.getVMColumnIndex(treeNodeColumn)
       const { handleGetRowId } = createHandleGetRowId($xeTable)
       let validRows = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: treeNodeColumn, columnIndex, $columnIndex, row })) : rows
       if (accordion) {
@@ -3337,7 +3341,7 @@ export default defineComponent({
       }
       reactData.treeExpandedFlag++
       return Promise.all(result).then(() => {
-        return tableMethods.recalculate()
+        return $xeTable.recalculate()
       })
     }
 
@@ -3350,14 +3354,14 @@ export default defineComponent({
     const handleVirtualTreeExpand = (rows: any[], expanded: boolean) => {
       return handleBaseTreeExpand(rows, expanded).then(() => {
         handleVirtualTreeToList()
-        tablePrivateMethods.handleTableData()
+        $xeTable.handleTableData()
         updateAfterDataIndex()
         return nextTick()
       }).then(() => {
-        return tableMethods.recalculate(true)
+        return $xeTable.recalculate(true)
       }).then(() => {
         setTimeout(() => {
-          tableMethods.updateCellAreas()
+          $xeTable.updateCellAreas()
         }, 30)
       })
     }
@@ -5543,7 +5547,7 @@ export default defineComponent({
             internalData.rowExpandedMaps = rowExpandedMaps
             rows = rows.slice(rows.length - 1, rows.length)
           }
-          const validRows: any[] = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: expandColumn, columnIndex, $columnIndex, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) })) : rows
+          const validRows: any[] = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: expandColumn, columnIndex, $columnIndex, row, rowIndex: $xeTable.getRowIndex(row), $rowIndex: $xeTable.getVMRowIndex(row) })) : rows
           if (expanded) {
             validRows.forEach((row: any) => {
               const rowid = handleGetRowId(row)
@@ -6176,7 +6180,7 @@ export default defineComponent({
       if (tableFilter) {
         if (getEventTargetNode(evnt, el, 'vxe-cell--filter').flag) {
           // 如果点击了筛选按钮
-        } else if (getEventTargetNode(evnt, tableFilter.$el as HTMLDivElement).flag) {
+        } else if (getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value as HTMLDivElement).flag) {
           // 如果点击筛选容器
         } else {
           if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -8241,6 +8245,10 @@ export default defineComponent({
         const currentColumnOpts = computeCurrentColumnOpts.value
         const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod as any
         const { column: newValue } = params
+        const { trigger } = currentColumnOpts
+        if (trigger === 'manual') {
+          return
+        }
         const isChange = oldValue !== newValue
         if (!beforeRowMethod || beforeRowMethod({ column: newValue, $table: $xeTable })) {
           $xeTable.setCurrentColumn(newValue)
@@ -8257,6 +8265,10 @@ export default defineComponent({
         const currentRowOpts = computeCurrentRowOpts.value
         const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod as any
         const { row: newValue } = params
+        const { trigger } = currentRowOpts
+        if (trigger === 'manual') {
+          return
+        }
         const isChange = oldValue !== newValue
         if (!beforeRowMethod || beforeRowMethod({ row: newValue, $table: $xeTable })) {
           $xeTable.setCurrentRow(newValue)
@@ -8303,10 +8315,10 @@ export default defineComponent({
        * 展开树节点事件
        */
       triggerTreeExpandEvent (evnt, params) {
-        const { treeExpandLazyLoadedMaps } = internalData
+        const { treeExpandLazyLoadedMaps, treeEATime } = internalData
         const treeOpts = computeTreeOpts.value
         const { row, column } = params
-        const { lazy, trigger } = treeOpts
+        const { lazy, trigger, accordion } = treeOpts
         if (trigger === 'manual') {
           return
         }
@@ -8316,7 +8328,17 @@ export default defineComponent({
           const expanded = !$xeTable.isTreeExpandByRow(row)
           const columnIndex = $xeTable.getColumnIndex(column)
           const $columnIndex = $xeTable.getVMColumnIndex(column)
-          $xeTable.setTreeExpand(row, expanded)
+          if (treeEATime) {
+            clearTimeout(treeEATime)
+          }
+          $xeTable.setTreeExpand(row, expanded).then(() => {
+            if (accordion) {
+              internalData.treeEATime = setTimeout(() => {
+                internalData.treeEATime = undefined
+                $xeTable.scrollToRow(row)
+              }, 30)
+            }
+          })
           dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt)
         }
       },
@@ -9483,7 +9505,6 @@ export default defineComponent({
         }
         const isRollX = scrollLeft !== lastScrollLeft
         const isRollY = true
-
         internalData.inVirtualScroll = true
         setScrollTop(bodyScrollElem, scrollTop)
         setScrollTop(leftScrollElem, scrollTop)
@@ -9594,7 +9615,8 @@ export default defineComponent({
           if (isScrollXBig && mouseOpts.area) {
             errLog('vxe.error.notProp', ['mouse-config.area'])
           }
-          nextTick(() => {
+          calcScrollbar()
+          return nextTick().then(() => {
             updateStyle()
           })
         }
@@ -9690,6 +9712,7 @@ export default defineComponent({
         if (isScrollYBig && mouseOpts.area) {
           errLog('vxe.error.notProp', ['mouse-config.area'])
         }
+        calcScrollbar()
         return nextTick().then(() => {
           updateStyle()
         })
@@ -10602,7 +10625,6 @@ export default defineComponent({
         initTpImg()
       }
 
-      ;(window as any).aa = $xeTable
       nextTick(() => {
         const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props
         const { scrollXStore, scrollYStore } = internalData
@@ -10661,6 +10683,9 @@ export default defineComponent({
         if (props.highlightHoverColumn) {
           warnLog('vxe.error.delProp', ['highlight-hover-column', 'column-config.isHover'])
         }
+        if (props.resizable) {
+          warnLog('vxe.error.delProp', ['resizable', 'column-config.resizable'])
+        }
         // if (props.scrollY) {
         //   warnLog('vxe.error.delProp', ['scroll-y', 'virtual-y-config'])
         // }

package/styles/components/table-module/filter.scss

@@ -33,9 +33,11 @@
   position: absolute;
   top: 0;
   min-width: 100px;
+  font-size: var(--vxe-ui-font-size-default);
   border-radius: var(--vxe-ui-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
+  color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
   &:not(.is--multiple) {
@@ -110,3 +112,17 @@
 .vxe-table--filter-option {
   @include baseMixin.createCheckboxIcon();
 }
+
+
+
+.vxe-table--filter-wrapper {
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}

package/styles/components/table.scss

@@ -1617,10 +1617,12 @@
     height: 1em;
     text-align: center;
     transform: translateY(-50%);
-    // background-color: var(--vxe-ui-layout-background-color);
     z-index: 1;
     user-select: none;
     cursor: pointer;
+    & > i {
+      background-color: var(--vxe-ui-layout-background-color);
+    }
   }
   .vxe-tree--node-btn {
     display: block;
@@ -1650,6 +1652,9 @@
     &.col--rs-height,
     &.col--auto-height {
       overflow: hidden;
+      &.col--tree-node {
+        overflow: unset;
+      }
       & > .vxe-cell {
         overflow: hidden;
       }