vxe-table 4.21.4 → 4.21.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.21.4",
+  "version": "4.21.6",
   "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.17.28"
+    "vxe-pc-ui": "4.18.2"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

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

@@ -482,8 +482,8 @@ VxeUI.hooks.add('tableCustomModule', {
       handleUpdateCustomColumn,
       handleCustomStyle () {
         const reactData = $xeTable.reactData
-        const { customStore } = reactData
 
+        const { customStore } = reactData
         if (!customStore.visible) {
           return nextTick()
         }

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, getDomNode } from '../../../ui/src/dom'
+import { toCssUnit, triggerEvent, updatePanelPlacement } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
 import type { TableFilterMethods, TableFilterPrivateMethods, VxeTableDefines } from '../../../../types'
@@ -27,15 +27,12 @@ hooks.add('tableFilterModule', {
       const { filterStore } = reactData
       const { elemStore } = internalData
       const { column, targetEl } = filterStore
-      if (!column || !targetEl) {
+      if (!column) {
         return nextTick()
       }
       const tableEl = refElem.value
-      const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
       const filterOpts = computeFilterOpts.value
       const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts
-      const currEl = targetEl
-      const tableRect = tableEl.getBoundingClientRect()
       const filterRender = column ? column.filterRender : null
       const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
 
@@ -48,63 +45,81 @@ hooks.add('tableFilterModule', {
       if (!filterWrapperElem) {
         return nextTick()
       }
-      const btnRect = currEl.getBoundingClientRect()
       const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
       const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
-      const filterWidth = filterWrapperElem.offsetWidth
-      const centerWidth = currEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
-      let left = 0
-      let top = 0
-      let maxHeight: number = 0
+
       /**
        * 是否显示筛选按钮图标
        * 如果不存在图标，则相对单元格居中显示
        */
-      if (transfer) {
-        left = btnRect.left - centerWidth + scrollLeft
-        top = btnRect.top + currEl.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
+      const handleStyle = () => {
+        let currEl = targetEl
+        if (!targetEl) {
+          const headerWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
+          const colEl = headerWrapperElem ? headerWrapperElem.querySelector<HTMLDivElement>(`.vxe-header--column.${column.id}`) : null
+          if (colEl) {
+            currEl = colEl
+          }
         }
-      } else {
-        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)
-        if (left < 1) {
-          left = 1
-        } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
-          left = tableEl.clientWidth - filterWidth - 1
+        if (!currEl) {
+          return nextTick()
         }
-        if ($xeGGWrapper) {
-          const wrapperEl = $xeGGWrapper.getRefMaps().refElem.value
-          if (wrapperEl) {
-            const wrapperRect = wrapperEl.getBoundingClientRect()
-            top += tableRect.top - wrapperRect.top
+
+        const btnRect = currEl.getBoundingClientRect()
+        const tableRect = tableEl.getBoundingClientRect()
+        let left = 0
+        let top = 0
+        let maxHeight = 0
+        let panelStyle: Record<string, string | number> = {}
+        if (transfer) {
+          const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
+            defaultPlacement: 'bottom',
+            isMinWidth: false,
+            teleportTo: transfer
+          })
+          panelStyle = ppObj.style
+        } else {
+          const filterWidth = filterWrapperElem.offsetWidth
+          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)
+          if (left < 1) {
+            left = 1
+          } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
+            left = tableEl.clientWidth - filterWidth - 1
+          }
+          if ($xeGGWrapper) {
+            const wrapperEl = $xeGGWrapper.getRefMaps().refElem.value
+            if (wrapperEl) {
+              const wrapperRect = wrapperEl.getBoundingClientRect()
+              top += tableRect.top - wrapperRect.top
+            }
+          }
+          panelStyle = {
+            top: toCssUnit(top),
+            left: toCssUnit(left)
           }
         }
-      }
-      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
+        if (zIndex) {
+          panelStyle.zIndex = zIndex
+        }
+        filterStore.style = panelStyle
+        // 筛选面板是自适应表格高度
+        if (compConf ? !compConf.tableFilterAutoHeight : false) {
+          maxHeight = 0
+        } else {
+          if (customMaxHeight) {
+            maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
+          }
         }
+        // 判断面板不能大于表格高度
+        filterStore.maxHeight = maxHeight
       }
-      // 判断面板不能大于表格高度
-      filterStore.maxHeight = maxHeight
-      return nextTick()
+      handleStyle()
+      return nextTick().then(() => {
+        handleStyle()
+      })
     }
     const filterPrivateMethods: TableFilterPrivateMethods = {
       checkFilterOptions () {
@@ -121,15 +136,14 @@ hooks.add('tableFilterModule', {
         if (filterStore.column === column && filterStore.visible) {
           filterStore.visible = false
         } else {
-          const currEl = btnEl || colEl
           $xeTable.handleFilterOptions(column)
           internalData._currFilterParams = params
-          filterStore.targetEl = currEl
+          filterStore.targetEl = btnEl
           filterStore.style = null
           filterStore.visible = true
           initStore.filter = true
         }
-        nextTick(() => {
+        nextTick().then(() => {
           updatePopupStyle()
         })
         $xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt)

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

@@ -414,11 +414,10 @@ hooks.add('tableKeyboardModule', {
       },
       // 处理当前列方向键移动
       moveCurrentColumn (isLeftArrow, isRightArrow, evnt) {
-        const { currentColumn } = reactData
-        const { visibleColumn } = internalData
+        const { currentCol, visibleColumn } = internalData
         let targetCol: VxeTableDefines.ColumnInfo | null = null
-        if (currentColumn) {
-          const _columnIndex = $xeTable.getVTColumnIndex(currentColumn)
+        if (currentCol) {
+          const _columnIndex = $xeTable.getVTColumnIndex(currentCol)
           if (isLeftArrow && _columnIndex > 0) {
             targetCol = visibleColumn[_columnIndex - 1]
           } else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {

package/packages/table/src/body.ts

@@ -122,8 +122,8 @@ export default defineVxeComponent({
       const $xeGantt = $xeTable.xeGantt
 
       const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
-      const { tableData, tableColumn, dragRow, overflowX, overflowY, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData
-      const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps } = tableInternalData
+      const { tableData, tableColumn, dragRow, overflowX, overflowY, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps, currColFlag } = tableReactData
+      const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps, currentCol } = tableInternalData
       const cellOpts = computeCellOpts.value
       const validOpts = computeValidOpts.value
       const checkboxOpts = computeCheckboxOpts.value
@@ -491,7 +491,7 @@ export default defineVxeComponent({
             'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
             'col--valid-error': !!errorValidItem,
             'show--valid-bg': errorValidItem && validOpts.showErrorBackground,
-            'col--current': currentColumn === column
+            'col--current': currColFlag && currentCol === column
           },
           getPropClass(compCellClassName, cellParams),
           getPropClass(className, cellParams),

package/packages/table/src/footer.ts

@@ -52,8 +52,8 @@ export default defineVxeComponent({
 
       const { fixedType } = props
       const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
-      const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFootFlag } = tableReactData
-      const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData
+      const { scrollXLoad, scrollYLoad, overflowX, mergeFootFlag, currColFlag } = tableReactData
+      const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore, currentCol } = tableInternalData
       const virtualXOpts = computeVirtualXOpts.value
       const footerTooltipOpts = computeFooterTooltipOpts.value
       const resizableOpts = computeResizableOpts.value
@@ -195,7 +195,7 @@ export default defineVxeComponent({
             'is--pg-left': isCellPaddingLeft,
             'is--pg-right': isCellPaddingRight,
             'col--ellipsis': hasEllipsis,
-            'col--current': currentColumn === column
+            'col--current': currColFlag && currentCol === column
           }, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)],
           ...attrs,
           style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null,

package/packages/table/src/header.ts

@@ -64,8 +64,8 @@ export default defineVxeComponent({
 
       const { fixedType } = props
       const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
-      const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn } = tableReactData
-      const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps } = tableInternalData
+      const { dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn, currColFlag } = tableReactData
+      const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps, currentCol } = tableInternalData
       const virtualXOpts = computeVirtualXOpts.value
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
@@ -226,7 +226,7 @@ export default defineVxeComponent({
             'is--filter-active': hasFilter,
             'is--drag-active': columnOpts.drag && !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
             'is--drag-disabled': columnOpts.drag && isDisabledDrag,
-            'col--current': currentColumn === column
+            'col--current': currColFlag && currentCol === column
           },
           headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName) : '',
           headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(cellParams) : headerCellClassName) : ''
@@ -271,8 +271,8 @@ export default defineVxeComponent({
 
       const { fixedType } = props
       const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps
-      const { currentColumn, overflowX } = tableReactData
-      const { fullColumnIdData } = tableInternalData
+      const { overflowX, currColFlag } = tableReactData
+      const { fullColumnIdData, currentCol } = tableInternalData
       const headerTooltipOpts = computeHeaderTooltipOpts.value
       const cellOpts = computeCellOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
@@ -347,7 +347,7 @@ export default defineVxeComponent({
             'fixed--width': !isAutoCellWidth,
             'is--padding': isPadding,
             'is--sortable': column.sortable,
-            'col--current': currentColumn === column
+            'col--current': currColFlag && currentCol === column
           }
           ],
           key: colid,

package/packages/table/src/table.ts

@@ -1,7 +1,7 @@
 import { h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, Teleport, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollTopTo, wheelScrollLeftTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement, hasEventInputTarget } from '../../ui/src/dom'
+import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollTopTo, wheelScrollLeftTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement, hasAxternalInputTarget } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 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'
@@ -362,11 +362,19 @@ export default defineVxeComponent({
     })
 
     const computeHeaderTooltipOpts = computed(() => {
-      return Object.assign({}, getConfig().tooltip, getConfig().table.headerTooltipConfig, props.headerTooltipConfig)
+      const tooltipOpts = computeTooltipOpts.value
+      return Object.assign({}, getConfig().tooltip, {
+        enterable: tooltipOpts.enterable,
+        defaultPlacement: tooltipOpts.defaultPlacement
+      }, getConfig().table.headerTooltipConfig, props.headerTooltipConfig)
     })
 
     const computeFooterTooltipOpts = computed(() => {
-      return Object.assign({}, getConfig().tooltip, getConfig().table.footerTooltipConfig, props.footerTooltipConfig)
+      const tooltipOpts = computeTooltipOpts.value
+      return Object.assign({}, getConfig().tooltip, {
+        enterable: tooltipOpts.enterable,
+        defaultPlacement: tooltipOpts.defaultPlacement
+      }, getConfig().table.footerTooltipConfig, props.footerTooltipConfig)
     })
 
     const computeTableTipConfig = computed(() => {
@@ -6927,7 +6935,7 @@ export default defineVxeComponent({
       },
       getCurrentColumn () {
         const columnOpts = computeColumnOpts.value
-        return columnOpts.isCurrent || props.highlightCurrentColumn ? reactData.currentColumn : null
+        return columnOpts.isCurrent || props.highlightCurrentColumn ? internalData.currentCol : null
       },
       /**
        * 用于当前列，设置某列行为高亮状态
@@ -6939,7 +6947,8 @@ export default defineVxeComponent({
         const column = handleFieldOrColumn($xeTable, fieldOrColumn)
         if (column) {
           $xeTable.clearCurrentColumn()
-          reactData.currentColumn = column
+          internalData.currentCol = column
+          reactData.currColFlag++ // 刷新当前列状态
         }
         return nextTick().then(() => {
           // 更新状选中态
@@ -6952,7 +6961,8 @@ export default defineVxeComponent({
        * 用于当前列，手动清空当前高亮的状态
        */
       clearCurrentColumn () {
-        reactData.currentColumn = null
+        internalData.currentCol = null
+        reactData.currColFlag++ // 刷新当前列状态
         return nextTick()
       },
       setPendingRow (rows: any | any[], status: boolean) {
@@ -8597,8 +8607,7 @@ export default defineVxeComponent({
 
     const handleGlobalScrollEvent = (evnt: MouseEvent) => {
       const { filterStore } = reactData
-      const filterOpts = computeFilterOpts.value
-      if (filterStore.visible && filterOpts.transfer) {
+      if (filterStore.visible) {
         $xeTable.handleFilterStyle()
       }
       reUpdateCustomStyleEvent(evnt)
@@ -9016,7 +9025,7 @@ export default defineVxeComponent({
                 .then(() => $xeTable.scrollToRow(parentRow))
                 .then(() => $xeTable.triggerCurrentRowEvent(evnt, params))
             }
-          } else if (keyboardConfig && keyboardOpts.isUndoRedo && isControlKey && (isZ || isY) && !hasEventInputTarget(evnt.target)) {
+          } else if (keyboardConfig && keyboardOpts.isUndoRedo && isControlKey && (isZ || isY) && !hasAxternalInputTarget(evnt.target)) {
             if (evnt.target) {
               if (isY || (hasShiftKey && isZ)) {
               // 恢复被撤销的操作：Ctrl + Y 或 Ctrl + Shift + Z
@@ -9123,6 +9132,10 @@ export default defineVxeComponent({
     }
 
     const handleGlobalResizeEvent = () => {
+      const { filterStore } = reactData
+      if (filterStore.visible) {
+        $xeTable.handleFilterStyle()
+      }
       if ($xeTable.closeMenu) {
         $xeTable.closeMenu()
       }
@@ -11310,7 +11323,7 @@ export default defineVxeComponent({
         }
       },
       triggerCurrentColumnEvent (evnt, params) {
-        const { currentColumn: oldValue } = reactData
+        const { currentCol: oldValue } = internalData
         const columnOpts = computeColumnOpts.value
         const currentColumnOpts = computeCurrentColumnOpts.value
         const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod as any
@@ -13540,9 +13553,9 @@ export default defineVxeComponent({
       },
       setHoverRow (row) {
         const $xeGanttView = internalData.xeGanttView
+        $xeTable.clearHoverRow()
         const rowid = getRowid($xeTable, row)
         const el = refElem.value
-        $xeTable.clearHoverRow()
         if (el) {
           XEUtils.arrayEach(el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'))
         }

package/packages/table/src/util.ts

@@ -39,8 +39,14 @@ export function createInternalData (): TableInternalData {
     customHeight: 0,
     customMinHeight: 0,
     customMaxHeight: 0,
+
     // 当前 hover 行
     hoverRow: null,
+    hoverCol: null,
+    // 当前行
+    currentRow: null,
+    currentCol: null,
+
     // 最后滚动位置
     lastScrollLeft: 0,
     lastScrollTop: 0,
@@ -94,9 +100,6 @@ export function createInternalData (): TableInternalData {
 
     fullCellStoreMaps: {},
 
-    // 当前行
-    currentRow: null,
-
     // 合并表头单元格的数据
     mergeHeaderList: [],
     mergeHeaderMaps: {},
@@ -207,8 +210,6 @@ export function createReactData (): TableReactData {
     isAllSelected: false,
     // 复选框属性，有选中且非全选状态
     isIndeterminate: false,
-    // 单选框属性，选中列
-    currentColumn: null,
     // 单选框属性，选中行
     selectRadioRow: null,
     // 表尾合计数据
@@ -428,7 +429,9 @@ export function createReactData (): TableReactData {
 
     isDragResize: false,
     isRowLoading: false,
-    isColLoading: false
+    isColLoading: false,
+
+    currColFlag: 1
   }
 }
 

package/packages/ui/src/dom.ts

@@ -201,6 +201,20 @@ export function hasEventInputTarget (target: EventTarget | Element | null) {
   return tagName && ['input', 'textarea'].includes((tagName.toLowerCase()))
 }
 
+/**
+ * 判断是否由内部可复用控件触发，输入框带有 vxe-reusekeep-control
+ */
+function hasReusekeepControl (elem: EventTarget | HTMLElement | null) {
+  if (elem) {
+    return hasClass(elem as HTMLElement, 'vxe-reusekeep-control')
+  }
+  return false
+}
+
+export function hasAxternalInputTarget (target: EventTarget | Element | null) {
+  return hasEventInputTarget(target) ? !hasReusekeepControl(target) : false
+}
+
 const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
 const scrollIntoView = 'scrollIntoView'
 
@@ -269,6 +283,168 @@ export function wheelScrollTopTo (diffNum: number, cb: (progress: number) => voi
   })
 }
 
+interface PanelPlacementOptions {
+  defaultTop?: number
+  defaultLeft?: number
+  placement?: '' | 'top' | 'bottom' | null
+  defaultPlacement?: '' | 'top' | 'bottom' | null
+  teleportTo?: boolean
+  marginSize?: number
+  isMinWidth?: boolean
+}
+
+/**
+ * 通用定位计算
+ */
+export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
+  const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+    teleportTo: false,
+    marginSize: 18,
+    isMinWidth: true
+  }, options)
+  let panelPlacement: 'top' | 'bottom' = 'bottom'
+  let top: number | '' = ''
+  let bottom: number | '' = ''
+  let left = 0
+  let minWidth: number | '' = ''
+  let arrowLeft: number | '' = ''
+  const stys: Record<string, string> = {}
+  if (panelElem && targetElem) {
+    const bodyEl = document.body
+    const parentWrapperEl = getPopupWrapperElement(panelElem)
+    if (parentWrapperEl) {
+      const targetWidth = targetElem.offsetWidth
+      const targetHeight = targetElem.offsetHeight
+      const panelWidth = panelElem.offsetWidth
+      const panelHeight = panelElem.offsetHeight
+
+      const parentWrapperRect = parentWrapperEl.getBoundingClientRect()
+      const panelRect = panelElem.getBoundingClientRect()
+      const targetRect = targetElem.getBoundingClientRect()
+      const visibleHeight = bodyEl.clientHeight
+      const visibleWidth = bodyEl.clientWidth
+
+      const offsetLeft = parentWrapperRect.left
+      const offsetTop = 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)
+        if (placement === 'top') {
+          panelPlacement = 'top'
+          top = targetTop - panelHeight
+        } else if (!placement) {
+          if (defaultPlacement === 'top') {
+            panelPlacement = 'top'
+            if (!defaultTop) {
+              top = targetTop - panelHeight
+            }
+            // 如果上面不够放，则向下
+            if (top < marginSize) {
+              panelPlacement = 'bottom'
+              top = targetTop + targetHeight
+            }
+            // 如果下面不够放，则向上（优先）
+            if (top + panelHeight + marginSize > visibleHeight) {
+              panelPlacement = 'top'
+              top = targetTop - panelHeight
+            }
+          } else {
+            // 如果下面不够放，则向上
+            if (top + panelHeight + marginSize > visibleHeight) {
+              panelPlacement = 'top'
+              top = targetTop - panelHeight
+            }
+            // 如果上面不够放，则向下（优先）
+            if (top < marginSize) {
+              panelPlacement = 'bottom'
+              top = targetTop + targetHeight
+            }
+          }
+        }
+        // 如果溢出右边
+        if (left + panelWidth + marginSize > visibleWidth) {
+          left -= left + panelWidth + marginSize - visibleWidth
+        }
+        // 如果溢出左边
+        if (left < marginSize) {
+          left = marginSize
+        }
+
+        // 偏移
+        top -= offsetTop
+        left -= offsetLeft
+      } else {
+        if (placement === 'top') {
+          panelPlacement = 'top'
+          bottom = targetHeight
+        } else if (!placement) {
+          // 如果下面不够放，则向上
+          top = targetHeight
+          if (targetTop + targetHeight + panelHeight + marginSize > visibleHeight) {
+            // 如果上面不够放，则向下（优先）
+            if (targetTop - targetHeight - panelHeight > marginSize) {
+              panelPlacement = 'top'
+              top = ''
+              bottom = targetHeight
+            }
+          }
+        }
+        // 是否超出右侧
+        if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
+          left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
+        }
+      }
+      if (XEUtils.isNumber(top)) {
+        stys.top = toCssUnit(top)
+      }
+      if (XEUtils.isNumber(bottom)) {
+        stys.bottom = toCssUnit(bottom)
+      }
+      if (XEUtils.isNumber(left)) {
+        stys.left = toCssUnit(left)
+      }
+      if (isMinWidth && XEUtils.isNumber(minWidth)) {
+        stys.minWidth = toCssUnit(minWidth)
+      }
+
+      // 箭头
+      if (left === targetLeft) {
+        if (targetWidth <= panelWidth) {
+          arrowLeft = targetWidth / 2
+        }
+      } else if (left < targetLeft) {
+        if (left + panelWidth > targetLeft + targetWidth) {
+          arrowLeft = (targetLeft - left) + targetWidth / 2
+        } else {
+          arrowLeft = (targetLeft - left) + (panelWidth - (targetLeft - left)) / 2
+        }
+      }
+    }
+  }
+  return {
+    top: top || 0,
+    bottom: bottom || 0,
+    left: left || 0,
+    arrowLeft: arrowLeft || 0,
+    style: stys,
+    placement: panelPlacement
+  }
+}
+
+export function getPopupWrapperElement (panelElem: HTMLElement | null | undefined) {
+  if (!panelElem) {
+    return null
+  }
+  const bodyEl = document.body
+  const parentEl = panelElem.parentElement
+  return (parentEl === bodyEl ? document.documentElement : parentEl) || null
+}
+
 export function getPopupContainer (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
   const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
   return selectElem || 'body'

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

@@ -70,7 +70,7 @@
     padding-top: 0.2em;
   }
   .vxe-table--filter-body {
-    max-height: 200px;
+    max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
     padding-bottom: 0.2em;
   }
   & > ul {

package/styles/theme/base.scss

@@ -106,6 +106,8 @@
   --vxe-ui-vxe-table-custom-column-header-align-width: var(--vxe-ui-vxe-table-custom-column-align-width);
   --vxe-ui-vxe-table-custom-column-footer-align-width: var(--vxe-ui-vxe-table-custom-column-align-width);
 
+  --vxe-ui-vxe-table-filter-default-max-height: 260px;
+
   /*toolbar*/
   --vxe-ui-toolbar-custom-active-background-color: #D9DADB;
   --vxe-ui-toolbar-height-xlarge: 54px;