vxe-table 4.18.10 → 4.18.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.18.10",
+  "version": "4.18.12",
   "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

@@ -492,7 +492,7 @@ export default defineVxeComponent({
 
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
       const { hasFixedColumn, treeExpandedFlag, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
-      const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
+      const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps, currentRow } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
       const treeOpts = computeTreeOpts.value
@@ -582,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)
         ]

package/packages/table/src/header.ts

@@ -53,7 +53,9 @@ export default defineVxeComponent({
         spanColumns = visibleColgroups
       }
       headerColumn.value = spanColumns
-      $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null)
+      nextTick(() => {
+        $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null)
+      })
     }
 
     const renderRows = (isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][], $rowIndex: number, cols: VxeTableDefines.ColumnInfo[]) => {

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,
@@ -2086,10 +2088,13 @@ export default defineVxeComponent({
       const { treeConfig } = props
       const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData
       const { fullAllDataRowIdData } = internalData
+      const el = refElem.value
+      if (!el || !el.clientWidth) {
+        return
+      }
       const treeOpts = computeTreeOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
-      const el = refElem.value
-      if (el && !isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine))) {
+      if (!isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine))) {
         const { handleGetRowId } = createHandleGetRowId($xeTable)
         el.setAttribute('data-calc-row', 'Y')
         tableData.forEach(row => {
@@ -2480,8 +2485,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)) {
@@ -2913,7 +2918,7 @@ export default defineVxeComponent({
       }
     }
 
-    const handleCheckedRadioRow = (row: any, isForce?: boolean) => {
+    const handleCheckedRadioRow = (row: any, isForce: boolean) => {
       const radioOpts = computeRadioOpts.value
       const { checkMethod } = radioOpts
       if (row && (isForce || (!checkMethod || checkMethod({ $table: $xeTable, row })))) {
@@ -3085,8 +3090,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 +3115,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) : {} // 刷新行展开状态
@@ -3348,6 +3353,10 @@ export default defineVxeComponent({
       const { scrollXWidth, scrollYHeight } = reactData
       const { elemStore } = internalData
       const scrollbarOpts = computeScrollbarOpts.value
+      const el = refElem.value
+      if (!el || !el.clientWidth) {
+        return
+      }
       const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
       const headerTableElem = getRefElem(elemStore['main-header-table'])
       const footerTableElem = getRefElem(elemStore['main-footer-table'])
@@ -3435,6 +3444,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 +3453,9 @@ export default defineVxeComponent({
           autoCellWidth()
           updateRowExpandStyle()
         }
+        if (customStore.visible && $xeTable.handleCustomStyle) {
+          $xeTable.handleCustomStyle()
+        }
         if (rceTimeout) {
           clearTimeout(rceTimeout)
           if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -4624,6 +4637,10 @@ export default defineVxeComponent({
 
     const updateColumnOffsetLeft = () => {
       const { visibleColumn, fullColumnIdData } = internalData
+      const el = refElem.value
+      if (!el || !el.clientWidth) {
+        return
+      }
       let offsetLeft = 0
       for (let cIndex = 0, rLen = visibleColumn.length; cIndex < rLen; cIndex++) {
         const column = visibleColumn[cIndex]
@@ -4639,6 +4656,10 @@ export default defineVxeComponent({
     const updateRowOffsetTop = () => {
       const { expandColumn } = reactData
       const { afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData
+      const el = refElem.value
+      if (!el || !el.clientWidth) {
+        return
+      }
       const expandOpts = computeExpandOpts.value
       const rowOpts = computeRowOpts.value
       const cellOpts = computeCellOpts.value
@@ -4663,6 +4684,10 @@ export default defineVxeComponent({
      */
     const updateRowExpandStyle = () => {
       const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData
+      const el = refElem.value
+      if (!el || !el.clientWidth) {
+        return
+      }
       const expandOpts = computeExpandOpts.value
       const rowOpts = computeRowOpts.value
       const cellOpts = computeCellOpts.value
@@ -4726,6 +4751,10 @@ export default defineVxeComponent({
       }
       const { tableData } = reactData
       const { fullAllDataRowIdData, treeExpandedMaps } = internalData
+      const el = refElem.value
+      if (!el || !el.clientWidth) {
+        return
+      }
       const cellOpts = computeCellOpts.value
       const rowOpts = computeRowOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
@@ -6393,7 +6422,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 +6472,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 +6493,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)
@@ -8057,6 +8085,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)
+    }
+
     /**
      * 全局滚动事件
      */
@@ -8119,8 +8166,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
@@ -10361,14 +10408,14 @@ export default defineVxeComponent({
           let newValue = row
           let isChange = oldValue !== newValue
           if (strict) {
-            handleCheckedRadioRow(newValue)
+            handleCheckedRadioRow(newValue, false)
           } else {
             if (oldValue === newValue) {
               newValue = null
             }
             isChange = oldValue !== newValue
             if (isChange && newValue) {
-              handleCheckedRadioRow(newValue)
+              handleCheckedRadioRow(newValue, false)
             } else {
               newValue = null
               $xeTable.clearRadioRow()
@@ -10413,7 +10460,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
@@ -12470,7 +12517,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()
@@ -13016,7 +13063,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 = {
@@ -13046,8 +13093,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
@@ -13198,16 +13243,6 @@ export default defineVxeComponent({
                     })
                   ]
                 : []),
-              /**
-               * 自定义列
-               */
-              !showCustomSimpleOutside && initStore.custom
-                ? h(TableCustomPanelComponent, {
-                  key: 'cs',
-                  ref: refTableCustom,
-                  customStore
-                })
-                : renderEmptyElement($xeTable),
               /**
                * 加载中
                */
@@ -13237,6 +13272,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'
         }, [
@@ -13247,16 +13302,6 @@ export default defineVxeComponent({
             h('div', {
               ref: refPopupWrapperElem
             }, [
-              /**
-               * 自定义列
-               */
-              showCustomSimpleOutside && initStore.custom
-                ? h(TableCustomPanelComponent, {
-                  key: 'cs',
-                  ref: refTableCustom,
-                  customStore
-                })
-                : renderEmptyElement($xeTable),
               /**
                * 筛选
                */
@@ -13937,6 +13982,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 })
     })
@@ -13974,6 +14020,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,