vxe-table 4.18.9 → 4.18.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.18.9",
+  "version": "4.18.11",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

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

@@ -2,8 +2,9 @@ import { nextTick } from 'vue'
 import { VxeUI } from '../../../ui'
 import XEUtils from 'xe-utils'
 import { getColumnList } from '../../src/util'
+import { toCssUnit } from '../../../ui/src/dom'
 
-import type { TableCustomMethods, TableCustomPrivateMethods, VxeColumnPropTypes, VxeTableDefines } from '../../../../types'
+import type { TableCustomMethods, TableCustomPrivateMethods, VxeColumnPropTypes, VxeTableDefines, VxeComponentStyleType } from '../../../../types'
 
 const tableCustomMethodKeys: (keyof TableCustomMethods)[] = ['openCustom', 'closeCustom', 'getCustomVisible', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox']
 
@@ -20,13 +21,16 @@ VxeUI.hooks.add('tableCustomModule', {
     const updatePopupStyle = () => {
       const { customStore } = reactData
       const customOpts = computeCustomOpts.value
+      const { mode, placement, popupOptions } = customOpts
+      const showSimple = !(mode === 'modal' || mode === 'drawer')
+      const { transfer, maxHeight } = popupOptions || {}
       const customSimpleMode = computeCustomSimpleMode.value
       const showCustomSimpleOutside = customSimpleMode === 'outside'
-      const { popupOptions } = customOpts
-      const { maxHeight } = popupOptions || {}
+      const bodyEl = document.documentElement
       let wrapperEl = refElem.value
       let popupTop = 0
       let popupMaxHeight: string | number = 0
+      const popupStys: VxeComponentStyleType = {}
       if ($xeGantt) {
         const { refGanttContainerElem } = $xeGantt.getRefMaps()
         const ganttContainerElem = refGanttContainerElem.value
@@ -34,7 +38,12 @@ VxeUI.hooks.add('tableCustomModule', {
           wrapperEl = ganttContainerElem
         }
       }
-      if (showCustomSimpleOutside) {
+      const tableRect = wrapperEl.getBoundingClientRect()
+      // 多种模式，指定元素插入
+      if (showSimple && transfer) {
+        popupTop = tableRect.top + bodyEl.scrollTop
+        popupMaxHeight = XEUtils.eqNull(maxHeight) ? 360 : maxHeight
+      } else if (showCustomSimpleOutside) {
         if ($xeGGWrapper && wrapperEl) {
           popupTop = wrapperEl.offsetTop
         }
@@ -46,12 +55,60 @@ VxeUI.hooks.add('tableCustomModule', {
         }
         popupMaxHeight = Math.max(88, popupMaxHeight)
       }
-      customStore.popupTop = popupTop
-      customStore.maxHeight = XEUtils.eqNull(maxHeight) ? popupMaxHeight : maxHeight
+      let popupMxHeight: string | number = 0
+      if (!(placement === 'left' || placement === 'right')) {
+        popupMxHeight = XEUtils.eqNull(maxHeight) ? popupMaxHeight : maxHeight
+      }
+      if (!placement || !(['left', 'right', 'bottom-left', 'bottom-right'].includes(placement))) {
+        if (popupTop) {
+          popupStys.top = toCssUnit(popupTop)
+        }
+      }
+
+      if (showSimple && transfer) {
+        if (placement === 'bottom-left' || placement === 'bottom-right') {
+          popupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1)
+        }
+        if (placement === 'top-left' || placement === 'bottom-left') {
+          popupStys.left = toCssUnit(tableRect.left)
+        } else if (!placement || placement === 'top-right' || placement === 'bottom-right') {
+          popupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1)
+        }
+      }
+
+      if (popupMxHeight) {
+        popupStys.maxHeight = toCssUnit(popupMxHeight)
+      }
+      customStore.popupStyle = popupStys
+      customStore.maxHeight = popupMxHeight
+      return nextTick()
     }
 
     const openCustom = () => {
       const { initStore, customStore } = reactData
+      const customOpts = computeCustomOpts.value
+      const { mode, popupOptions } = customOpts
+      const showSimple = !(mode === 'modal' || mode === 'drawer')
+      const { transfer } = popupOptions || {}
+      const customSimpleMode = computeCustomSimpleMode.value
+      const showCustomSimpleOutside = customSimpleMode === 'outside'
+      let cpToElem = null
+      // 多种模式，指定元素插入
+      if (showSimple && transfer) {
+        cpToElem = document.body
+      } else {
+        if (showCustomSimpleOutside && $xeGGWrapper) {
+          const { refPopupContainerElem } = $xeGGWrapper.getRefMaps()
+          const popupContainerElem = refPopupContainerElem.value
+          if (popupContainerElem) {
+            cpToElem = popupContainerElem
+          }
+        }
+      }
+      if (internalData.customPopupToElem !== cpToElem) {
+        reactData.ctPopupFlag++
+      }
+      internalData.customPopupToElem = cpToElem
       customStore.visible = true
       initStore.custom = true
       handleUpdateCustomColumn()
@@ -345,7 +402,13 @@ VxeUI.hooks.add('tableCustomModule', {
           $xeTable.emitCustomEvent('close', evnt)
         }
       },
-      handleUpdateCustomColumn
+      handleUpdateCustomColumn,
+      handleCustomStyle () {
+        const reactData = $xeTable.reactData
+
+        reactData.isCustomDragStatus = false
+        return updatePopupStyle()
+      }
     }
 
     return { ...customMethods, ...customPrivateMethods }

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

@@ -2,11 +2,11 @@ import { h, inject, ref, Ref, provide, VNode, PropType, nextTick, TransitionGrou
 import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import { formatText } from '../../../ui/src/utils'
-import { getTpImg, addClass, removeClass, hasControlKey, toCssUnit } from '../../../ui/src/dom'
+import { getTpImg, addClass, removeClass, hasControlKey } from '../../../ui/src/dom'
 import { errLog } from '../../../ui/src/log'
 import XEUtils from 'xe-utils'
 
-import type { VxeButtonEvents, VxeComponentStyleType } from 'vxe-pc-ui'
+import type { VxeButtonEvents } from 'vxe-pc-ui'
 import type { VxeTableDefines, VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeColumnPropTypes, VxeTableCustomPanelConstructor, TableCustomPanelReactData, TableCustomPanelInternalData, TableCustomPanelPrivateRef, TableCustomPanelPrivateComputed } from '../../../../types'
 
 const { getI18n, getIcon, renderEmptyElement } = VxeUI
@@ -18,7 +18,8 @@ export function createInternalData (): TableCustomPanelInternalData {
     // prevDragGroupField: undefined,
     // prevDragAggFnColid: undefined,
     // prevDragToChild: false,
-    // prevDragPos: null
+    // prevDragPos: null,
+    // customDragTime: null
   }
 }
 
@@ -42,7 +43,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeSize, computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyWrapperElem = ref() as Ref<HTMLDivElement>
@@ -327,9 +328,14 @@ export default defineVxeComponent({
     }
 
     const sortDragstartEvent = (evnt: DragEvent) => {
+      const { customDragTime } = customPanelInternalData
       if (evnt.dataTransfer) {
         evnt.dataTransfer.setDragImage(getTpImg(), 0, 0)
       }
+      if (customDragTime) {
+        clearTimeout(customDragTime)
+      }
+      tableReactData.isCustomDragStatus = true
       customPanelInternalData.prevDragGroupField = null
       customPanelInternalData.prevDragAggFnColid = null
     }
@@ -511,6 +517,10 @@ export default defineVxeComponent({
               tableReactData.customColumnList = collectColumn.slice(0)
               $xeTable.handleColDragSwapColumn()
             }
+            customPanelInternalData.customDragTime = setTimeout(() => {
+              tableReactData.isCustomDragStatus = false
+              customPanelInternalData.customDragTime = undefined
+            }, 350)
           }).catch(() => {
           })
         }
@@ -612,13 +622,14 @@ export default defineVxeComponent({
 
       const { customStore } = props
       const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps
-      const { isCustomStatus, customColumnList } = tableReactData
+      const { isCustomStatus, customColumnList, isCustomDragStatus } = tableReactData
       const customOpts = computeCustomOpts.value
       const { immediate } = customOpts
       const columnDragOpts = computeColumnDragOpts.value
-      const { maxHeight, popupTop } = customStore
+      const { popupStyle } = customStore
       const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
+      const vSize = computeSize.value
       const { isCrossDrag } = columnDragOpts
       const slots = customOpts.slots || {}
       const headerSlot = slots.header
@@ -754,20 +765,14 @@ export default defineVxeComponent({
           )
         }
       })
-      const popupStys: VxeComponentStyleType = {}
-      if (maxHeight && !['left', 'right'].includes(placement || '')) {
-        if (popupTop) {
-          popupStys.top = toCssUnit(popupTop)
-        }
-        popupStys.maxHeight = toCssUnit(maxHeight)
-      }
       return h('div', {
         ref: refElem,
         key: 'simple',
         class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
+          [`size--${vSize}`]: vSize,
           'is--active': customStore.visible
         }],
-        style: popupStys
+        style: popupStyle
       }, customStore.visible
         ? [
             h('div', {
@@ -830,7 +835,7 @@ export default defineVxeComponent({
                     }, $xeTable.callSlot(defaultSlot, params))
                     : h(TransitionGroup, {
                       class: 'vxe-table-custom--panel-list',
-                      name: 'vxe-table-custom--list',
+                      name: isCustomDragStatus ? 'vxe-table-custom--list' : '',
                       tag: 'ul',
                       ...customWrapperOns
                     }, {

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

@@ -377,8 +377,7 @@ hooks.add('tableKeyboardModule', {
       // 处理当前行方向键移动
       moveCurrentRow (isUpArrow, isDwArrow, evnt) {
         const { treeConfig } = props
-        const { currentRow } = reactData
-        const { afterFullData } = internalData
+        const { afterFullData, currentRow } = internalData
         const treeOpts = computeTreeOpts.value
         const childrenField = treeOpts.children || treeOpts.childrenField
         let targetRow

package/packages/table/src/body.ts

@@ -366,6 +366,16 @@ export default defineVxeComponent({
         if (treeConfig) {
           tdVNs.push(...renderLine(rowid, cellParams, cellHeight))
         }
+        const clVNs: VxeComponentSlotType[] = []
+        if (!isVNPreEmptyStatus) {
+          clVNs.push(
+            h('div', {
+              colid,
+              rowid,
+              class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
+            }, column.renderCell(cellParams))
+          )
+        }
         tdVNs.push(
           h('div', {
             key: 'tc',
@@ -376,15 +386,7 @@ export default defineVxeComponent({
             }],
             style: tcStyle,
             title: showTitle ? $xeTable.getCellLabel(row, column) : null
-          }, isVNPreEmptyStatus
-            ? []
-            : [
-                h('div', {
-                  colid,
-                  rowid,
-                  class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
-                }, column.renderCell(cellParams))
-              ])
+          }, clVNs)
         )
         if (showValidTip && errorValidItem) {
           const errRule = errorValidItem.rule
@@ -489,8 +491,8 @@ export default defineVxeComponent({
       const $xeGantt = $xeTable.xeGantt
 
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedFlag, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
-      const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
+      const { hasFixedColumn, treeExpandedFlag, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
+      const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps, currentRow } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
       const treeOpts = computeTreeOpts.value
@@ -580,7 +582,8 @@ export default defineVxeComponent({
             'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
             'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
             'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid],
-            'row--group': hasRowGroupAggregate
+            'row--group': hasRowGroupAggregate,
+            'row--current': currentRow && rowid === getRowid($xeTable, currentRow)
           },
           getPropClass(rowClassName, params)
         ]
@@ -592,7 +595,7 @@ export default defineVxeComponent({
             class: trClass,
             rowid: rowid,
             style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-            key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+            key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
             ...trOn
           }, tdVNs)
         )

package/packages/table/src/table.ts

@@ -101,6 +101,7 @@ export default defineVxeComponent({
 
     const refTeleportWrapper = ref<HTMLDivElement>()
     const refPopupWrapperElem = ref<HTMLDivElement>()
+    const refCustomContainerElem = ref<HTMLDivElement>()
 
     const refLeftContainer = ref() as Ref<HTMLDivElement>
     const refRightContainer = ref() as Ref<HTMLDivElement>
@@ -790,6 +791,7 @@ export default defineVxeComponent({
       refRightContainer,
       refColResizeBar,
       refRowResizeBar,
+      refCustomContainerElem,
       refScrollXVirtualElem,
       refScrollYVirtualElem,
       refScrollXHandleElem,
@@ -2480,8 +2482,8 @@ export default defineVxeComponent({
 
     const updateStyle = () => {
       const { mouseConfig } = props
-      const { isGroup, currentRow, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData
-      const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData
+      const { isGroup, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData
+      const { visibleColumn, tableHeight, elemStore, currentRow, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData
       const $xeGanttView = internalData.xeGanttView
       const el = refElem.value
       if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
@@ -3085,8 +3087,8 @@ export default defineVxeComponent({
     // 还原展开、选中等相关状态
     const handleReserveStatus = () => {
       const { treeConfig } = props
-      const { expandColumn, currentRow, selectRadioRow } = reactData
-      const { fullDataRowIdData, fullAllDataRowIdData, radioReserveRow, selectCheckboxMaps, treeExpandedMaps, rowExpandedMaps } = internalData
+      const { expandColumn, selectRadioRow } = reactData
+      const { fullDataRowIdData, fullAllDataRowIdData, radioReserveRow, selectCheckboxMaps, treeExpandedMaps, rowExpandedMaps, currentRow } = internalData
       const expandOpts = computeExpandOpts.value
       const treeOpts = computeTreeOpts.value
       const radioOpts = computeRadioOpts.value
@@ -3110,7 +3112,7 @@ export default defineVxeComponent({
         handleCheckedCheckboxRow(handleReserveRow(internalData.checkboxReserveRowMap), true, true)
       }
       if (currentRow && !fullAllDataRowIdData[getRowid($xeTable, currentRow)]) {
-        reactData.currentRow = null // 刷新当前行状态
+        internalData.currentRow = null // 刷新当前行状态
       }
       // 行展开
       internalData.rowExpandedMaps = expandColumn ? getRecoverRowMaps(rowExpandedMaps) : {} // 刷新行展开状态
@@ -3435,6 +3437,7 @@ export default defineVxeComponent({
     const handleLazyRecalculate = (reFull: boolean, reWidth: boolean, reHeight: boolean) => {
       return new Promise<void>(resolve => {
         const $xeGanttView = internalData.xeGanttView
+        const { customStore } = reactData
         const { rceTimeout, rceRunTime } = internalData
         const resizeOpts = computeResizeOpts.value
         const refreshDelay = resizeOpts.refreshDelay || 20
@@ -3443,6 +3446,9 @@ export default defineVxeComponent({
           autoCellWidth()
           updateRowExpandStyle()
         }
+        if (customStore.visible && $xeTable.handleCustomStyle) {
+          $xeTable.handleCustomStyle()
+        }
         if (rceTimeout) {
           clearTimeout(rceTimeout)
           if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -6393,7 +6399,7 @@ export default defineVxeComponent({
         const el = refElem.value
         $xeTable.clearCurrentRow()
         // $xeTable.clearCurrentColumn()
-        reactData.currentRow = row
+        internalData.currentRow = row
         if (rowOpts.isCurrent || props.highlightCurrentRow) {
           if (el) {
             XEUtils.arrayEach(el.querySelectorAll(`[rowid="${getRowid($xeTable, row)}"]`), elem => addClass(elem, 'row--current'))
@@ -6443,7 +6449,7 @@ export default defineVxeComponent({
       clearCurrentRow () {
         const $xeGanttView = internalData.xeGanttView
         const el = refElem.value
-        reactData.currentRow = null
+        internalData.currentRow = null
         internalData.hoverRow = null
         if (el) {
           XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'))
@@ -6464,8 +6470,7 @@ export default defineVxeComponent({
        * 用于当前行，获取当前行的数据
        */
       getCurrentRecord (isFull) {
-        const { currentRow } = reactData
-        const { fullDataRowIdData, afterFullRowMaps } = internalData
+        const { fullDataRowIdData, afterFullRowMaps, currentRow } = internalData
         const rowOpts = computeRowOpts.value
         if (rowOpts.isCurrent || props.highlightCurrentRow) {
           const rowid = getRowid($xeTable, currentRow)
@@ -7446,10 +7451,20 @@ export default defineVxeComponent({
       /**
        * 如果有滚动条，则滚动到对应的行
        */
-      scrollToRow (row, fieldOrColumn, options) {
+      scrollToRow (rowOrRowid, fieldOrColumn, options) {
         const { isAllOverflow, scrollYLoad, scrollXLoad } = reactData
-        const { _sToTime } = internalData
+        const { fullAllDataRowIdData, _sToTime } = internalData
         const rest = []
+        let row: any
+        if (XEUtils.isString(rowOrRowid) || XEUtils.isNumber(rowOrRowid)) {
+          const rowid = rowOrRowid
+          const rowRest = rowid ? fullAllDataRowIdData[rowid] : null
+          if (rowRest) {
+            row = rowRest.row
+          }
+        } else {
+          row = rowOrRowid
+        }
         if (row) {
           if (props.treeConfig) {
             rest.push($xeTable.scrollToTreeRow(row))
@@ -8047,6 +8062,25 @@ export default defineVxeComponent({
       }
     }
 
+    const reUpdateCustomStyleEvent = (evnt: MouseEvent) => {
+      const { customStore } = reactData
+      const customOpts = computeCustomOpts.value
+      const { popupOptions } = customOpts
+      const { transfer } = popupOptions || {}
+      if (transfer && customStore.visible) {
+        const tableCustom = refTableCustom.value
+        if (tableCustom && $xeTable.handleCustomStyle && !checkTargetElement(evnt.target, [tableCustom.getRefMaps().refElem.value as HTMLDivElement], evnt.currentTarget)) {
+          $xeTable.handleCustomStyle().then(() => {
+            $xeTable.handleCustomStyle()
+          })
+        }
+      }
+    }
+
+    const handleGlobalScrollEvent = (evnt: MouseEvent) => {
+      reUpdateCustomStyleEvent(evnt)
+    }
+
     /**
      * 全局滚动事件
      */
@@ -8109,8 +8143,8 @@ export default defineVxeComponent({
       if (internalData.isActivated) {
         $xeTable.preventEvent(evnt, 'event.keydown', null, () => {
           const { mouseConfig, keyboardConfig, treeConfig, editConfig, highlightCurrentRow, highlightCurrentColumn } = props
-          const { ctxMenuStore, editStore, currentRow } = reactData
-          const { afterFullData, visibleColumn } = internalData
+          const { ctxMenuStore, editStore } = reactData
+          const { afterFullData, visibleColumn, currentRow } = internalData
           const isContentMenu = computeIsContentMenu.value
           const bodyMenu = computeBodyMenu.value
           const keyboardOpts = computeKeyboardOpts.value
@@ -10403,7 +10437,7 @@ export default defineVxeComponent({
         }
       },
       triggerCurrentRowEvent (evnt, params) {
-        const { currentRow: oldValue } = reactData
+        const { currentRow: oldValue } = internalData
         const rowOpts = computeRowOpts.value
         const currentRowOpts = computeCurrentRowOpts.value
         const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod as any
@@ -12460,7 +12494,7 @@ export default defineVxeComponent({
           rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
         }
         reactData.scrollYTop = scrollYTop
-        reactData.scrollYHeight = ySpaceHeight
+        reactData.scrollYHeight = isScrollYBig ? sYHeight : ySpaceHeight
         reactData.isScrollYBig = isScrollYBig
 
         calcScrollbar()
@@ -13006,7 +13040,7 @@ export default defineVxeComponent({
     const renderVN = () => {
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
       const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData
-      const { teleportToWrapperElem, popupToWrapperElem } = internalData
+      const { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
       const tipSlots = {
@@ -13036,8 +13070,6 @@ export default defineVxeComponent({
       const columnDragOpts = computeColumnDragOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
-      const customSimpleMode = computeCustomSimpleMode.value
-      const showCustomSimpleOutside = customSimpleMode === 'outside'
       const { isCrossTableDrag } = rowDragOpts
       const tbOns: {
         onContextmenu: (...args: any[]) => void
@@ -13188,16 +13220,6 @@ export default defineVxeComponent({
                     })
                   ]
                 : []),
-              /**
-               * 自定义列
-               */
-              !showCustomSimpleOutside && initStore.custom
-                ? h(TableCustomPanelComponent, {
-                  key: 'cs',
-                  ref: refTableCustom,
-                  customStore
-                })
-                : renderEmptyElement($xeTable),
               /**
                * 加载中
                */
@@ -13227,6 +13249,26 @@ export default defineVxeComponent({
             ])
           ])
         ]),
+        h('div', {
+          key: 'fpw',
+          ref: refCustomContainerElem
+        }, [
+          h(Teleport, {
+            to: customPopupToElem,
+            disabled: !!reactData.ctPopupFlag && !customPopupToElem
+          }, [
+            /**
+             * 自定义列
+             */
+            initStore.custom
+              ? h(TableCustomPanelComponent, {
+                key: 'cs',
+                ref: refTableCustom,
+                customStore
+              })
+              : renderEmptyElement($xeTable)
+          ])
+        ]),
         h('div', {
           key: 'tpw'
         }, [
@@ -13237,16 +13279,6 @@ export default defineVxeComponent({
             h('div', {
               ref: refPopupWrapperElem
             }, [
-              /**
-               * 自定义列
-               */
-              showCustomSimpleOutside && initStore.custom
-                ? h(TableCustomPanelComponent, {
-                  key: 'cs',
-                  ref: refTableCustom,
-                  customStore
-                })
-                : renderEmptyElement($xeTable),
               /**
                * 筛选
                */
@@ -13319,7 +13351,10 @@ export default defineVxeComponent({
               minWidth: tableTipConfig.minWidth,
               minHeight: tableTipConfig.minHeight,
               maxWidth: tableTipConfig.maxWidth,
-              maxHeight: tableTipConfig.maxHeight
+              maxHeight: tableTipConfig.maxHeight,
+              placement: tableTipConfig.placement,
+              defaultPlacement: tableTipConfig.defaultPlacement,
+              popupClassName: tableTipConfig.popupClassName
             }, currTooltipSlot
               ? {
                   content: () => {
@@ -13924,6 +13959,7 @@ export default defineVxeComponent({
       globalEvents.on($xeTable, 'mousewheel', handleGlobalMousewheelEvent)
       globalEvents.on($xeTable, 'keydown', handleGlobalKeydownEvent)
       globalEvents.on($xeTable, 'resize', handleGlobalResizeEvent)
+      globalEvents.on($xeTable, 'scroll', handleGlobalScrollEvent)
       globalEvents.on($xeTable, 'contextmenu', $xeTable.handleGlobalContextmenuEvent)
       $xeTable.preventEvent(null, 'mounted', { $table: $xeTable })
     })
@@ -13961,6 +13997,7 @@ export default defineVxeComponent({
       globalEvents.off($xeTable, 'mousewheel')
       globalEvents.off($xeTable, 'keydown')
       globalEvents.off($xeTable, 'resize')
+      globalEvents.off($xeTable, 'scroll')
       globalEvents.off($xeTable, 'contextmenu')
 
       $xeTable.preventEvent(null, 'beforeUnmount', { $table: $xeTable })

package/packages/table/src/util.ts

@@ -90,6 +90,9 @@ export function createInternalData (): TableInternalData {
     fullColumnIdData: {},
     fullColumnFieldData: {},
 
+    // 当前行
+    currentRow: null,
+
     // 合并表头单元格的数据
     mergeHeaderList: [],
     mergeHeaderMaps: {},
@@ -142,9 +145,12 @@ export function createInternalData (): TableInternalData {
 
     teleportToWrapperElem: null,
     popupToWrapperElem: null,
+    customPopupToElem: null,
 
     lastSTime: 0,
 
+    // isCustomDragStatus: false,
+
     inited: false,
     tooltipTimeout: null,
     initStatus: false,
@@ -188,8 +194,6 @@ export function createReactData (): TableReactData {
     isAllSelected: false,
     // 复选框属性，有选中且非全选状态
     isIndeterminate: false,
-    // 当前行
-    currentRow: null,
     // 单选框属性，选中列
     currentColumn: null,
     // 单选框属性，选中行
@@ -225,7 +229,7 @@ export function createReactData (): TableReactData {
       activeWrapper: false,
       visible: false,
       maxHeight: null,
-      popupTop: 0,
+      popupStyle: {},
       oldSortMaps: {},
       oldFixedMaps: {},
       oldVisibleMaps: {}
@@ -395,6 +399,8 @@ export function createReactData (): TableReactData {
     resizeWidthFlag: 1,
 
     isCustomStatus: false,
+    isCustomDragStatus: true,
+    ctPopupFlag: 1,
 
     isCrossDragRow: false,
     dragRow: null,

package/packages/ui/index.ts

@@ -72,7 +72,8 @@ VxeUI.setConfig({
       strict: true
     },
     tooltipConfig: {
-      enterable: true
+      enterable: true,
+      defaultPlacement: 'top'
     },
     headerTooltipConfig: {
       enterable: true

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

@@ -64,6 +64,7 @@
   text-align: left;
   background-color: var(--vxe-ui-layout-background-color);
   z-index: 19;
+  color: var(--vxe-ui-font-color);
   border: 1px solid var(--vxe-ui-table-border-color);
   border-radius: var(--vxe-ui-border-radius);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
@@ -525,4 +526,17 @@
 }
 .vxe-table-custom-popup--table-col-fixed {
   width: 200px;
+}
+
+.vxe-table-custom-wrapper {
+  font-size: var(--vxe-ui-font-size-default);
+  &.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);
+  }
 }