vxe-table 3.25.0-beta.2 → 3.25.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.25.0-beta.2",
+  "version": "3.25.0-beta.4",
   "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",
@@ -65,7 +65,7 @@
     "vue-i18n": "^8.15.1",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.6.14",
-    "vxe-pc-ui": "3.20.2"
+    "vxe-pc-ui": "3.20.9"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/grid/src/grid.ts

@@ -10,7 +10,7 @@ import { tableProps } from '../../table/src/props'
 import VxeTableComponent from '../../table'
 import VxeToolbarComponent from '../../toolbar'
 
-import type { VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, ValueOf, VxeFormInstance, VxeFormItemPropTypes, VxePagerInstance } from 'vxe-pc-ui'
+import type { VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, VxeComponentIsVScrollbar, ValueOf, VxeFormInstance, VxeFormItemPropTypes, VxePagerInstance } from 'vxe-pc-ui'
 import type { GridReactData, VxeTablePropTypes, VxeGridConstructor, VxeToolbarPropTypes, VxeToolbarInstance, VxeGridPropTypes, VxeTableMethods, GridInternalData, VxeGridEmits, VxePagerDefines, VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, TableInternalData, VxeTableProps, VxeGridDefines } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('grid')
@@ -139,6 +139,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
   computed: {
     ...({} as {
       computeSize(): VxeComponentSizeType
+      computeIsVScrollbar(): VxeComponentIsVScrollbar
     }),
     isRespMsg () {
       const $xeGrid = this

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

@@ -453,8 +453,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0
 
       if (prevDragGroupField || prevDragAggFnColid) {
-        if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
-          $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt)
+        if ($xeTable.handlePivotTableAggPanelDragendEvent) {
+          $xeTable.handlePivotTableAggPanelDragendEvent(evnt)
         }
       } else if (prevDragCol && dragCol) {
         // 判断是否有拖动

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

@@ -17,7 +17,7 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   const internalData = $xeTable as unknown as TableInternalData
   const $xeGGWrapper = $xeGrid || $xeGantt
 
-  const { filterStore } = reactData
+  const { filterStore, scrollbarHeight } = reactData
   const { elemStore } = internalData
   const { column, targetEl } = filterStore
   if (!column) {
@@ -39,8 +39,6 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   if (!filterWrapperElem) {
     return $xeTable.$nextTick()
   }
-  const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
-  const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
 
   /**
    * 是否显示筛选按钮图标
@@ -72,6 +70,7 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
     if (transfer) {
       const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
         defaultPlacement: 'bottom',
+        appendTo: '',
         isMinWidth: false,
         teleportTo: transfer
       })
@@ -79,9 +78,9 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
     } else {
       const filterWidth = filterWrapperElem.offsetWidth
       const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
-      maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
       left = btnRect.left - tableRect.left - centerWidth
       top = btnRect.top - tableRect.top + currEl.clientHeight
+      maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight)
       if (left < 1) {
         left = 1
       } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
@@ -103,7 +102,6 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
     if (zIndex) {
       panelStyle.zIndex = zIndex
     }
-    filterStore.style = panelStyle
     // 筛选面板是自适应表格高度
     if (compConf ? !compConf.tableFilterAutoHeight : false) {
       maxHeight = 0
@@ -112,8 +110,8 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
         maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
       }
     }
-    // 判断面板不能大于表格高度
-    filterStore.maxHeight = maxHeight
+    panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none'
+    filterStore.style = panelStyle
   }
   handleStyle()
   return $xeTable.$nextTick().then(() => {

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

@@ -2,7 +2,7 @@ import { CreateElement, PropType } from 'vue'
 import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import { formatText, isEnableConf } from '../../../ui/src/utils'
-import { getPropClass, toCssUnit } from '../../../ui/src/dom'
+import { getPropClass } from '../../../ui/src/dom'
 import { getSlotVNs } from '../../../ui/src/vn'
 import { createComponentLog } from '../../../ui/src/log'
 
@@ -142,16 +142,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
      *************************/
 
     renderOptions (h: CreateElement, filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) {
+      const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar')
+
       const $xeFilterPanel = this
       const props = $xeFilterPanel
       const $xeTable = $xeFilterPanel.$xeTable
       const tableInternalData = $xeTable as unknown as TableInternalData
 
       const { filterStore } = props
-      const { column, maxHeight } = filterStore
+      const { column } = filterStore
       if (!column) {
         return []
       }
+      const filterOpts = $xeTable.computeFilterOpts
+      const { useScrollbar } = filterOpts
       const { filterMultiple, filters, slots } = column
       const filterOptions = (filters || []) as VxeTableDefines.FilterOption[]
       const filterSlot = slots ? slots.filter : null
@@ -160,33 +164,52 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (filterSlot) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template',
-            style: maxHeight
-              ? {
-                  maxHeight: toCssUnit(maxHeight)
-                }
-              : {}
+            class: 'vxe-table--filter-template'
           }, $xeTable.callSlot(filterSlot, params, h))
         ]
       } else if (filterRender && rtFilter) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template',
-            style: maxHeight
-              ? {
-                  maxHeight: toCssUnit(maxHeight)
-                }
-              : {}
+            class: 'vxe-table--filter-template'
           }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
         ]
       }
       const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked)
       const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate
+
+      const optVNs = filterOptions.map((item: any) => {
+        const isChecked = item._checked
+        const isIndeterminate = false
+        return h('div', {
+          class: ['vxe-table--filter-option', {
+            'is--checked': isChecked
+          }],
+          attrs: {
+            title: item.label
+          },
+          on: {
+            click: (evnt: MouseEvent) => {
+              ($xeFilterPanel as any).changeOption(evnt, !item._checked, item)
+            }
+          }
+        }, (filterMultiple
+          ? [
+              h('span', {
+                class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+              })
+            ]
+          : []).concat([
+          h('span', {
+            class: 'vxe-checkbox--label'
+          }, formatText(item.label, 1))
+        ]))
+      })
+
       return [
-        h('ul', {
+        h('div', {
           class: 'vxe-table--filter-header'
         }, [
-          h('li', {
+          h('div', {
             class: ['vxe-table--filter-option', {
               'is--checked': isAllChecked,
               'is--indeterminate': isAllIndeterminate
@@ -211,40 +234,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }, getI18n('vxe.table.allFilter'))
           ]))
         ]),
-        h('ul', {
-          class: 'vxe-table--filter-body',
-          style: maxHeight
-            ? {
-                maxHeight: toCssUnit(maxHeight)
-              }
-            : {}
-        }, filterOptions.map((item: any) => {
-          const isChecked = item._checked
-          const isIndeterminate = false
-          return h('li', {
-            class: ['vxe-table--filter-option', {
-              'is--checked': isChecked
-            }],
-            attrs: {
-              title: item.label
+        useScrollbar
+          ? h(VxeUIScrollbarComponent, {
+            class: 'vxe-table--scrollbar-filter-body',
+            props: {
+              viewClassName: 'vxe-table--scrollbar-filter-body-view'
             },
-            on: {
-              click: (evnt: MouseEvent) => {
-                ($xeFilterPanel as any).changeOption(evnt, !item._checked, item)
-              }
+            scopedSlots: {
+              default: () => optVNs
             }
-          }, (filterMultiple
-            ? [
-                h('span', {
-                  class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                })
-              ]
-            : []).concat([
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, formatText(item.label, 1))
-          ]))
-        }))
+          })
+          : h('div', {
+            class: 'vxe-table--filter-body'
+          }, optVNs)
       ]
     },
     renderFooter (h: CreateElement) {

package/packages/table/src/methods.ts

@@ -6,7 +6,6 @@ import Cell from './cell'
 import { getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime'
-import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './scrollbar'
 import { createComponentLog } from '../../ui/src/log'
 import { getCrossTableDragRowInfo } from './store'
 
@@ -15,7 +14,9 @@ import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, TableReactData
 
 const { warnLog, errLog } = createComponentLog('table')
 
-const { getConfig, getI18n, renderer, formats, interceptor, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI
+const { getConfig, getI18n, renderer, scrollbarUtils, formats, interceptor, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI
+
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {}
 
 const supportMaxRow = 5e6
 const customStorageKey = 'VXE_CUSTOM_STORE'
@@ -3241,6 +3242,7 @@ function handleRecalculateStyle ($xeTable: VxeTableConstructor & VxeTablePrivate
     if (reFull) {
       updateTreeLineStyle($xeTable)
     }
+    $xeTable.updateScrollbar()
     internalData.rceRunTime = Date.now()
     if (reFull) {
       return computeScrollLoad($xeTable)
@@ -10274,8 +10276,15 @@ const tableMethods: any = {
    */
   updateScrollbar () {
     const $xeTable = this
-    $xeTable.updateThumbSize()
-    $xeTable.updateThumbOffset()
+
+    const isVScrollbar = $xeTable.computeIsVScrollbar
+    if (isVScrollbar) {
+      return $xeTable.$nextTick().then(() => {
+        $xeTable.updateThumbSize()
+        $xeTable.updateThumbOffset()
+      })
+    }
+    return Promise.resolve()
   },
   /**
    * 表头单元格按下事件
@@ -12819,12 +12828,11 @@ const tableMethods: any = {
   },
   triggerBodyScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const props = $xeTable
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { useScrollbar } = props
     const { scrollYLoad, scrollXLoad } = reactData
+    const isVScrollbar = $xeTable.computeIsVScrollbar
     const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData
     if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
       return
@@ -12843,7 +12851,7 @@ const tableMethods: any = {
     if (!bodyScrollElem) {
       return
     }
-    if (!useScrollbar) {
+    if (!isVScrollbar) {
       if (!xHandleEl) {
         return
       }

package/packages/table/src/table.ts

@@ -33,6 +33,27 @@ const { warnLog, errLog } = createComponentLog('table')
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, domUtils, globalMixins, renderEmptyElement } = VxeUI
 
+function bindScrollbarResize ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { elemStore } = internalData
+  const isVScrollbar = $xeTable.computeIsVScrollbar
+  if (isVScrollbar) {
+    const el = $xeTable.$refs.refElem as HTMLDivElement
+    const viewInnerEl = getRefElem(elemStore['main-body-table'])
+    const scrollObserver = globalResize.create(() => {
+      ($xeTable as any).reScrollFlag++
+    })
+    if (el) {
+      scrollObserver.observe(el)
+    }
+    if (viewInnerEl) {
+      scrollObserver.observe(viewInnerEl)
+    }
+    internalData.scrollObserver = scrollObserver
+  }
+}
+
 function handleUpdateMergeBodyCells ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) {
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -564,14 +585,13 @@ function renderNativeBody (h: CreateElement, $xeTable: VxeTableConstructor & Vxe
 }
 
 function renderVirtualBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-  const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
   const $xeGantt = $xeTable.$xeGantt
   const $xeGanttView = internalData.xeGanttView
 
-  const { useScrollbar } = props
   const { xThumbWidth, yThumbHeight } = reactData
+  const isVScrollbar = $xeTable.computeIsVScrollbar
   const scrollbarOpts = $xeTable.computeScrollbarOpts
   const scrollXAutoHide = $xeTable.computeScrollXAutoHide
   const scrollYAutoHide = $xeTable.computeScrollYAutoHide
@@ -586,10 +606,10 @@ function renderVirtualBody (h: CreateElement, $xeTable: VxeTableConstructor & Vx
   return h('div', {
     key: 'lvb',
     class: ['vxe-table--layout-wrapper', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
-      'is--virtual-scrollbar': useScrollbar,
-      'ov-padding': useScrollbar && scrollbarOpts.padding,
-      'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-      'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+      'is--virtual-scrollbar': isVScrollbar,
+      'ov-padding': isVScrollbar && scrollbarOpts.padding,
+      'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+      'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
       'overflow-y': yThumbHeight,
       'overflow-x': xThumbWidth
     }]
@@ -1091,7 +1111,8 @@ export default {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
-      return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
+      const isVScrollbar = $xeTable.computeIsVScrollbar
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
     },
     tipConfig () {
       return { ...this.tooltipOpts }
@@ -1161,7 +1182,8 @@ export default {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
-      return Object.assign({}, getConfig().table.filterConfig, props.filterConfig)
+      const isVScrollbar = $xeTable.computeIsVScrollbar
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().table.filterConfig, props.filterConfig)
     },
     computeFloatingFilterOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -1782,40 +1804,44 @@ export default {
 
       $xeTable.reLayoutFlag++
     },
+    computeIsVScrollbar () {
+      const $xeTable = this
+
+      $xeTable.$nextTick(() => {
+        bindScrollbarResize($xeTable)
+        $xeTable.$nextTick(() => {
+          $xeTable.reLayoutFlag++
+        })
+      })
+    },
     computeScrollbarXToTop () {
       const $xeTable = this
 
-      $xeTable.reScrollFlag++
       $xeTable.reLayoutFlag++
     },
     computeScrollbarYToLeft () {
       const $xeTable = this
 
-      $xeTable.reScrollFlag++
       $xeTable.reLayoutFlag++
     },
     computeScrollXVisible () {
       const $xeTable = this
 
-      $xeTable.reScrollFlag++
       $xeTable.reLayoutFlag++
     },
     computeScrollYVisible () {
       const $xeTable = this
 
-      $xeTable.reScrollFlag++
       $xeTable.reLayoutFlag++
     },
     computeScrollXHeight () {
       const $xeTable = this
 
-      $xeTable.reScrollFlag++
       $xeTable.reLayoutFlag++
     },
     computeScrollYWidth () {
       const $xeTable = this
 
-      $xeTable.reScrollFlag++
       $xeTable.reLayoutFlag++
     },
     computeCellHeitht () {
@@ -1826,18 +1852,15 @@ export default {
     reLayoutFlag () {
       const $xeTable = this
 
-      $xeTable.$nextTick(() => {
+      $xeTable.$nextTick().then(() => {
         $xeTable.recalculate(true)
       })
     },
     reScrollFlag () {
       const $xeTable = this
 
-      $xeTable.$nextTick(() => {
+      $xeTable.updateScrollbar().then(() => {
         $xeTable.updateScrollbar()
-        $xeTable.$nextTick(() => {
-          $xeTable.updateScrollbar()
-        })
       })
     },
 
@@ -2318,7 +2341,7 @@ export default {
     }
 
     $xeTable.$nextTick(() => {
-      const { useScrollbar, autoResize } = props
+      const { autoResize } = props
       const { elemStore } = internalData
 
       // 使用已安装的组件，如果未安装则不渲染
@@ -2326,6 +2349,7 @@ export default {
       const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
 
       const { showOverflow, showHeaderOverflow, showFooterOverflow } = props
+      const isVScrollbar = $xeTable.computeIsVScrollbar
       const tooltipOpts = $xeTable.computeTooltipOpts
       const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts
       const footerTooltipOpts = $xeTable.computeFooterTooltipOpts
@@ -2367,7 +2391,7 @@ export default {
       }
 
       const el = $xeTable.$refs.refElem as HTMLDivElement
-      if (useScrollbar) {
+      if (isVScrollbar) {
         const viewInnerEl = getRefElem(elemStore['main-body-table'])
         const scrollObserver = globalResize.create(() => {
           $xeTable.reScrollFlag++
@@ -2497,9 +2521,10 @@ export default {
 
     const { xID } = $xeTable
 
-    const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props
+    const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props
     const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData
     const { leftList, rightList } = columnStore
+    const isVScrollbar = $xeTable.computeIsVScrollbar
     const loadingSlot = slots.loading
     const tipSlots = {
       header: slots.headerTooltip || slots['header-tooltip'],
@@ -2545,7 +2570,7 @@ export default {
     }
     return h('div', {
       ref: 'refElem',
-      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, isVScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
         [`size--${vSize}`]: vSize,
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
@@ -2613,7 +2638,7 @@ export default {
       h('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'
-      }, useScrollbar
+      }, isVScrollbar
         ? [renderVirtualBody(h, $xeTable)]
         : (
             scrollbarXToTop
@@ -2803,7 +2828,8 @@ export default {
             ref: 'refCommTooltip',
             props: {
               isArrow: false,
-              enterable: false
+              enterable: false,
+              useScrollbar: isVScrollbar
             }
           })
           : renderEmptyElement($xeTable),
@@ -2830,7 +2856,8 @@ export default {
               maxHeight: tableTipConfig.maxHeight,
               placement: tableTipConfig.placement,
               defaultPlacement: tableTipConfig.defaultPlacement,
-              popupClassName: tableTipConfig.popupClassName
+              popupClassName: tableTipConfig.popupClassName,
+              useScrollbar: tableTipConfig.useScrollbar
             },
             scopedSlots: currTooltipSlot
               ? {
@@ -2873,7 +2900,8 @@ export default {
               theme: validTipConfig.theme,
               enterable: validTipConfig.enterable,
               enterDelay: validTipConfig.enterDelay,
-              leaveDelay: validTipConfig.leaveDelay
+              leaveDelay: validTipConfig.leaveDelay,
+              useScrollbar: validTipConfig.useScrollbar
             }
           })
           : renderEmptyElement($xeTable)

package/packages/table/src/util.ts

@@ -270,8 +270,7 @@ export function createReactData (): TableReactData {
       isIndeterminate: false,
       style: null,
       column: null,
-      visible: false,
-      maxHeight: null
+      visible: false
     },
     // 存放列相关的信息
     columnStore: {

package/packages/ui/index.ts

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

package/packages/ui/src/dom.ts

@@ -266,6 +266,7 @@ interface PanelPlacementOptions {
   defaultLeft?: number
   placement?: '' | 'top' | 'bottom' | null
   defaultPlacement?: '' | 'top' | 'bottom' | null
+  appendTo?: string | HTMLElement | ((params: any) => string | HTMLElement)
   teleportTo?: boolean
   marginSize?: number
   isMinWidth?: boolean
@@ -275,7 +276,8 @@ interface PanelPlacementOptions {
  * 通用定位计算
  */
 export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
-  const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+  const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+    appendTo: '',
     teleportTo: false,
     marginSize: 18,
     isMinWidth: true
@@ -289,7 +291,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
   const stys: Record<string, string> = {}
   if (panelElem && targetElem) {
     const bodyEl = document.body
-    const parentWrapperEl = getPopupWrapperElement(panelElem)
+    const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem)
     if (parentWrapperEl) {
       const targetWidth = targetElem.offsetWidth
       const targetHeight = targetElem.offsetHeight
@@ -302,16 +304,18 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
       const visibleHeight = bodyEl.clientHeight
       const visibleWidth = bodyEl.clientWidth
 
-      const offsetLeft = parentWrapperRect.left
-      const offsetTop = parentWrapperRect.top
+      const parentWrapperScrollLeft = parentWrapperEl.scrollLeft
+      const parentWrapperScrollTop = parentWrapperEl.scrollTop
+      const parentWrapperOffsetLeft = parentWrapperRect.left
+      const parentWrapperOffsetTop = parentWrapperRect.top
       const targetLeft = targetRect.left
       const targetTop = targetRect.top
 
       minWidth = targetElem.offsetWidth
 
       if (teleportTo) {
-        left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)
-        top = defaultTop || (targetTop + targetHeight)
+        left = (defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)) - parentWrapperScrollLeft
+        top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop
         if (placement === 'top') {
           panelPlacement = 'top'
           top = targetTop - panelHeight
@@ -354,8 +358,8 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
         }
 
         // 偏移
-        top -= offsetTop
-        left -= offsetLeft
+        top -= parentWrapperOffsetTop
+        left -= parentWrapperOffsetLeft
       } else {
         if (placement === 'top') {
           panelPlacement = 'top'