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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.23.0-beta.2",
+  "version": "4.23.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",
@@ -66,7 +66,7 @@
     "typescript": "~5.9.3",
     "vue": "3.4.27",
     "vue-router": "~4.5.1",
-    "vxe-pc-ui": "4.20.2"
+    "vxe-pc-ui": "4.20.9"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/grid/src/grid.ts

@@ -64,6 +64,7 @@ export default defineVxeComponent({
     const defaultLayouts: VxeGridPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']]
 
     const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
 
@@ -268,6 +269,8 @@ export default defineVxeComponent({
     }
 
     const computeMaps: VxeGridPrivateComputed = {
+      computeSize,
+      computeIsVScrollbar,
       computeProxyOpts,
       computePagerOpts,
       computeFormOpts,

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

@@ -378,8 +378,8 @@ export default 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/hook.ts

@@ -24,7 +24,7 @@ hooks.add('tableFilterModule', {
     const { computeFilterOpts, computeMouseOpts, computeRendererOpts } = $xeTable.getComputeMaps()
 
     const updatePopupStyle = () => {
-      const { filterStore } = reactData
+      const { filterStore, scrollbarHeight } = reactData
       const { elemStore } = internalData
       const { column, targetEl } = filterStore
       if (!column) {
@@ -46,8 +46,6 @@ hooks.add('tableFilterModule', {
       if (!filterWrapperElem) {
         return nextTick()
       }
-      const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
-      const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
 
       /**
        * 是否显示筛选按钮图标
@@ -75,6 +73,7 @@ hooks.add('tableFilterModule', {
         if (transfer) {
           const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
             defaultPlacement: 'bottom',
+            appendTo: '',
             isMinWidth: false,
             teleportTo: transfer
           })
@@ -84,7 +83,7 @@ hooks.add('tableFilterModule', {
           const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
           left = btnRect.left - tableRect.left - centerWidth
           top = btnRect.top - tableRect.top + currEl.clientHeight
-          maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
+          maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight)
           if (left < 1) {
             left = 1
           } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
@@ -105,7 +104,6 @@ hooks.add('tableFilterModule', {
         if (zIndex) {
           panelStyle.zIndex = zIndex
         }
-        filterStore.style = panelStyle
         // 筛选面板是自适应表格高度
         if (compConf ? !compConf.tableFilterAutoHeight : false) {
           maxHeight = 0
@@ -114,8 +112,8 @@ hooks.add('tableFilterModule', {
             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 nextTick().then(() => {

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

@@ -2,7 +2,7 @@ import { h, ref, computed, inject, Teleport, 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'
 import XEUtils from 'xe-utils'
@@ -25,6 +25,8 @@ export default defineVxeComponent({
   setup (props, context) {
     const xID = XEUtils.uniqueId()
 
+    const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar')
+
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
     const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable
     const { computeFilterOpts, computeRendererOpts } = getComputeMaps()
@@ -124,10 +126,12 @@ export default defineVxeComponent({
 
     const renderOptions = (filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) => {
       const { filterStore } = props
-      const { column, maxHeight } = filterStore
+      const { column } = filterStore
       if (!column) {
         return []
       }
+      const filterOpts = computeFilterOpts.value
+      const { useScrollbar } = filterOpts
       const { filterMultiple, filters, slots } = column
       const filterOptions = (filters || []) as VxeTableDefines.FilterOption[]
       const filterSlot = slots ? slots.filter : null
@@ -136,33 +140,48 @@ export default 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))
         ]
       } else if (filterRender && rtFilter) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template',
-            style: maxHeight
-              ? {
-                  maxHeight: toCssUnit(maxHeight)
-                }
-              : {}
+            class: 'vxe-table--filter-template'
           }, getSlotVNs(rtFilter(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': item._checked
+          }],
+          title: item.label,
+          onClick: (evnt: MouseEvent) => {
+            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
@@ -183,36 +202,16 @@ export default 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': item._checked
-            }],
-            title: item.label,
-            onClick: (evnt: MouseEvent) => {
-              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))
-          ]))
-        }))
+        useScrollbar
+          ? h(VxeUIScrollbarComponent, {
+            class: 'vxe-table--scrollbar-filter-body',
+            viewClassName: 'vxe-table--scrollbar-filter-body-view'
+          }, {
+            default: () => optVNs
+          })
+          : h('div', {
+            class: 'vxe-table--filter-body'
+          }, optVNs)
       ]
     }
 

package/packages/table/src/table.ts

@@ -7,7 +7,6 @@ import { VxeUI } from '../../ui'
 import { createReactData, createInternalData, getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, 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'
 import Cell from './cell'
@@ -36,7 +35,9 @@ import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, Vx
 
 const { warnLog, errLog } = createComponentLog('table')
 
-const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
+const { getConfig, getIcon, getI18n, renderer, formats, scrollbarUtils, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
+
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {}
 
 const supportMaxRow = 5e6
 const customStorageKey = 'VXE_CUSTOM_STORE'
@@ -76,6 +77,7 @@ export default defineVxeComponent({
     const $xeGGWrapper = $xeGrid || $xeGantt
 
     const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const crossTableDragRowInfo = getCrossTableDragRowInfo()
 
@@ -425,7 +427,8 @@ export default defineVxeComponent({
     })
 
     const computeTooltipOpts = computed(() => {
-      return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
+      const isVScrollbar = computeIsVScrollbar.value
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
     })
 
     const computeHeaderTooltipOpts = computed(() => {
@@ -468,7 +471,8 @@ export default defineVxeComponent({
     })
 
     const computeFilterOpts = computed(() => {
-      return Object.assign({}, getConfig().table.filterConfig, props.filterConfig) as VxeTablePropTypes.FilterOpts
+      const isVScrollbar = computeIsVScrollbar.value
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().table.filterConfig, props.filterConfig) as VxeTablePropTypes.FilterOpts
     })
 
     const computeFloatingFilterOpts = computed(() => {
@@ -913,6 +917,7 @@ export default defineVxeComponent({
 
     const computeMaps: VxeTablePrivateComputed = {
       computeSize,
+      computeIsVScrollbar,
       computeTableId,
       computeValidOpts,
       computeRowField,
@@ -3616,6 +3621,7 @@ export default defineVxeComponent({
         if (reFull) {
           updateTreeLineStyle()
         }
+        updateScrollbar()
         internalData.rceRunTime = Date.now()
         if (reFull) {
           return computeScrollLoad()
@@ -3624,8 +3630,14 @@ export default defineVxeComponent({
     }
 
     const updateScrollbar = () => {
-      updateThumbSize()
-      updateThumbOffset()
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        return nextTick().then(() => {
+          updateThumbSize()
+          updateThumbOffset()
+        })
+      }
+      return Promise.resolve()
     }
 
     const defaultMinRunDelay = 50
@@ -12955,8 +12967,8 @@ export default defineVxeComponent({
         }
       },
       triggerBodyScrollEvent (evnt, fixedType) {
-        const { useScrollbar } = props
         const { scrollYLoad, scrollXLoad } = reactData
+        const isVScrollbar = computeIsVScrollbar.value
         const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
           return
@@ -12975,7 +12987,7 @@ export default defineVxeComponent({
         if (!bodyScrollElem) {
           return
         }
-        if (!useScrollbar) {
+        if (!isVScrollbar) {
           if (!xHandleEl) {
             return
           }
@@ -13737,6 +13749,25 @@ export default defineVxeComponent({
       }
     }
 
+    const bindScrollbarResize = () => {
+      const { elemStore } = internalData
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        const el = refElem.value
+        const viewInnerEl = getRefElem(elemStore['main-body-table'])
+        const scrollObserver = globalResize.create(() => {
+          reScrollFlag.value++
+        })
+        if (el) {
+          scrollObserver.observe(el)
+        }
+        if (viewInnerEl) {
+          scrollObserver.observe(viewInnerEl)
+        }
+        internalData.scrollObserver = scrollObserver
+      }
+    }
+
     const updateThumbSize = () => {
       const { elemStore } = internalData
 
@@ -14352,8 +14383,8 @@ export default defineVxeComponent({
     const renderVirtualBody = () => {
       const $xeGanttView = internalData.xeGanttView
 
-      const { useScrollbar } = props
       const { xThumbWidth, yThumbHeight } = reactData
+      const isVScrollbar = computeIsVScrollbar.value
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollXAutoHide = computeScrollXAutoHide.value
       const scrollYAutoHide = computeScrollYAutoHide.value
@@ -14368,10 +14399,10 @@ export default defineVxeComponent({
       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
         }]
@@ -14419,10 +14450,11 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      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 { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData
       const { leftList, rightList } = columnStore
+      const isVScrollbar = computeIsVScrollbar.value
       const loadingSlot = slots.loading
       const tipSlots = {
         header: slots.headerTooltip || slots['header-tooltip'],
@@ -14468,7 +14500,7 @@ export default defineVxeComponent({
       }
       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,
@@ -14533,7 +14565,7 @@ export default defineVxeComponent({
         h('div', {
           key: 'tw',
           class: 'vxe-table--render-wrapper'
-        }, useScrollbar
+        }, isVScrollbar
           ? [renderVirtualBody()]
           : (scrollbarXToTop
               ? [
@@ -14719,7 +14751,8 @@ export default defineVxeComponent({
               key: 'ctp',
               ref: refCommTooltip,
               isArrow: false,
-              enterable: false
+              enterable: false,
+              useScrollbar: isVScrollbar
             }),
             /**
               * 工具提示
@@ -14742,7 +14775,8 @@ export default defineVxeComponent({
               maxHeight: tableTipConfig.maxHeight,
               placement: tableTipConfig.placement,
               defaultPlacement: tableTipConfig.defaultPlacement,
-              popupClassName: tableTipConfig.popupClassName
+              popupClassName: tableTipConfig.popupClassName,
+              useScrollbar: tableTipConfig.useScrollbar
             }, currTooltipSlot
               ? {
                   content: () => {
@@ -14781,7 +14815,8 @@ export default defineVxeComponent({
                 theme: validTipConfig.theme,
                 enterable: validTipConfig.enterable,
                 enterDelay: validTipConfig.enterDelay,
-                leaveDelay: validTipConfig.leaveDelay
+                leaveDelay: validTipConfig.leaveDelay,
+                useScrollbar: validTipConfig.useScrollbar
               })
               : renderEmptyElement($xeTable)
           ])
@@ -14892,43 +14927,44 @@ export default defineVxeComponent({
     watch(() => VxeUI.getLanguage(), () => {
       reLayoutFlag.value++
     })
+    watch(computeIsVScrollbar, () => {
+      nextTick(() => {
+        bindScrollbarResize()
+        nextTick(() => {
+          reLayoutFlag.value++
+        })
+      })
+    })
     watch(computeScrollbarXToTop, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollbarYToLeft, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollXVisible, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollYVisible, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollXHeight, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollYWidth, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeCellHeitht, () => {
       reLayoutFlag.value++
     })
     watch(reLayoutFlag, () => {
-      $xeTable.recalculate(true)
+      nextTick().then(() => {
+        $xeTable.recalculate(true)
+      })
     })
 
     watch(reScrollFlag, () => {
-      nextTick(() => {
-        $xeTable.updateScrollbar()
-        nextTick(() => {
-          $xeTable.updateScrollbar()
-        })
+      updateScrollbar().then(() => {
+        updateScrollbar()
       })
     })
 
@@ -15077,7 +15113,7 @@ export default defineVxeComponent({
 
     onMounted(() => {
       const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource, areaConfig } = props
-      const { elemStore, scrollXStore, scrollYStore } = internalData
+      const { scrollXStore, scrollYStore } = internalData
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
       const aggregateOpts = computeAggregateOpts.value
@@ -15364,22 +15400,9 @@ export default defineVxeComponent({
       initData()
 
       nextTick(() => {
-        const { useScrollbar, autoResize } = props
-        const el = refElem.value
-        if (useScrollbar) {
-          const viewInnerEl = getRefElem(elemStore['main-body-table'])
-          const scrollObserver = globalResize.create(() => {
-            reScrollFlag.value++
-          })
-          if (el) {
-            scrollObserver.observe(el)
-          }
-          if (viewInnerEl) {
-            scrollObserver.observe(viewInnerEl)
-          }
-          internalData.scrollObserver = scrollObserver
-        }
+        const { autoResize } = props
         if (autoResize) {
+          const el = refElem.value
           const parentEl = $xeTable.getParentElem()
           const resizeObserver = globalResize.create(() => {
             if (props.autoResize) {
@@ -15394,6 +15417,7 @@ export default defineVxeComponent({
           }
           internalData.resizeObserver = resizeObserver
         }
+        bindScrollbarResize()
       })
 
       if (virtualYOpts.mode !== 'scroll') {

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

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

package/packages/ui/src/dom.ts

@@ -288,6 +288,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
@@ -297,7 +298,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
@@ -311,7 +313,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
@@ -324,16 +326,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
@@ -376,8 +380,8 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
         }
 
         // 偏移
-        top -= offsetTop
-        left -= offsetLeft
+        top -= parentWrapperOffsetTop
+        left -= parentWrapperOffsetLeft
       } else {
         if (placement === 'top') {
           panelPlacement = 'top'