vxe-table 3.20.9 → 3.20.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.20.9",
+  "version": "3.20.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/mixin.ts

@@ -1,7 +1,8 @@
 import XEUtils from 'xe-utils'
 import { getColumnList } from '../../src/util'
+import { toCssUnit } from '../../../ui/src/dom'
 
-import type { VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, TableReactData, TableInternalData } from '../../../../types'
+import type { VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, TableReactData, TableInternalData, VxeComponentStyleType } from '../../../../types'
 
 function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const $xeGrid = $xeTable.$xeGrid
@@ -11,20 +12,28 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
 
   const { customStore } = reactData
   const customOpts = $xeTable.computeCustomOpts
+  const { mode, placement, popupOptions } = customOpts
+  const showSimple = !(mode === 'modal' || mode === 'drawer')
+  const { transfer, maxHeight } = popupOptions || {}
   const customSimpleMode = $xeTable.computeCustomSimpleMode
   const showCustomSimpleOutside = customSimpleMode === 'outside'
-  const { popupOptions } = customOpts
-  const { maxHeight } = popupOptions || {}
+  const bodyEl = document.documentElement
   let wrapperEl = $xeTable.$refs.refElem as HTMLDivElement
   let popupTop = 0
   let popupMaxHeight: string | number = 0
+  const popupStys: VxeComponentStyleType = {}
   if ($xeGantt) {
     const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem as HTMLDivElement
     if (ganttContainerElem) {
       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
     }
@@ -36,8 +45,33 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
     }
     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 $xeTable.$nextTick()
 }
 
 function emitCustomEvent ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, type: VxeTableDefines.CustomType, evnt: Event) {
@@ -60,8 +94,40 @@ export default {
     _openCustom () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+      const $xeGrid = $xeTable.$xeGrid
+      const $xeGantt = $xeTable.$xeGantt
+      const $xeGGWrapper = $xeGrid || $xeGantt
 
       const { initStore, customStore } = reactData
+      const customOpts = $xeTable.computeCustomOpts
+      const { mode, popupOptions } = customOpts
+      const showSimple = !(mode === 'modal' || mode === 'drawer')
+      const { transfer } = popupOptions || {}
+      const customSimpleMode = $xeTable.computeCustomSimpleMode
+      const showCustomSimpleOutside = customSimpleMode === 'outside'
+      let cpToElem = $xeTable.$refs.refCustomContainerElem as HTMLElement
+      // 多种模式，指定元素插入
+      if (showSimple && transfer) {
+        cpToElem = document.body
+      } else {
+        if (showCustomSimpleOutside && $xeGGWrapper) {
+          const popupContainerElem = $xeGGWrapper.$refs.refPopupContainerElem as HTMLDivElement
+          if (popupContainerElem) {
+            cpToElem = popupContainerElem
+          }
+        }
+      }
+      if (cpToElem) {
+        const customPopupToElem = $xeTable.$refs.refCustomPopupToElem as HTMLDivElement
+        if (customPopupToElem && customPopupToElem.parentElement !== cpToElem) {
+          cpToElem.appendChild(customPopupToElem)
+        }
+      }
+      if (internalData.customPopupToElem !== cpToElem) {
+        reactData.ctPopupFlag++
+      }
+      internalData.customPopupToElem = cpToElem
       customStore.visible = true
       initStore.custom = true
       $xeTable.handleUpdateCustomColumn()
@@ -364,6 +430,11 @@ export default {
         customStore.oldVisibleMaps = visibleMaps
         reactData.customColumnList = collectColumn.slice(0)
       }
+    },
+    handleCustomStyle () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      return updatePopupStyle($xeTable)
     }
   } as any
 }

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

@@ -2,12 +2,12 @@ import { CreateElement, VNode, PropType } from 'vue'
 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 { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods, TableReactData, TableInternalData, VxeColumnPropTypes, VxeTableCustomPanelConstructor, TableCustomPanelReactData, TableCustomPanelInternalData } from '../../../../types'
-import type { VxeButtonDefines, VxeRadioGroupDefines, VxeComponentStyleType } from 'vxe-pc-ui'
+import type { VxeButtonDefines, VxeRadioGroupDefines } from 'vxe-pc-ui'
 
 const { getI18n, getIcon, renderEmptyElement } = VxeUI
 
@@ -389,11 +389,18 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     sortDragstartEvent (evnt: any) {
       const $xeTableCustomPanel = this
+      const $xeTable = $xeTableCustomPanel.$xeTable
+      const tableReactData = $xeTable as unknown as TableReactData
       const customPanelInternalData = $xeTableCustomPanel.internalData
 
+      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
     },
@@ -582,6 +589,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
               tableReactData.customColumnList = collectColumn.slice(0)
               $xeTable.handleColDragSwapColumn()
             }
+            customPanelInternalData.customDragTime = setTimeout(() => {
+              tableReactData.isCustomDragStatus = false
+              customPanelInternalData.customDragTime = undefined
+            }, 350)
           }).catch(() => {
           })
         }
@@ -697,13 +708,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { customStore } = props
       const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps
-      const { isCustomStatus, customColumnList } = tableReactData
+      const { isCustomStatus, customColumnList, isCustomDragStatus } = tableReactData
       const customOpts = $xeTable.computeCustomOpts
       const { immediate } = customOpts
       const columnDragOpts = $xeTable.computeColumnDragOpts
-      const { maxHeight, popupTop } = customStore
+      const { popupStyle } = customStore
       const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts
       const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn
+      const vSize = $xeTable.computeSize
       const { isCrossDrag } = columnDragOpts
       const slots = customOpts.slots || {}
       const headerSlot = slots.header
@@ -858,20 +870,14 @@ export default /* define-vxe-component start */ 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', {
@@ -941,7 +947,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                     : h('transition-group', {
                       class: 'vxe-table-custom--panel-list',
                       props: {
-                        name: 'vxe-table-custom--list',
+                        name: isCustomDragStatus ? 'vxe-table-custom--list' : '',
                         tag: 'ul'
                       },
                       on: customWrapperOns

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

@@ -362,12 +362,10 @@ export default {
     moveCurrentRow (isUpArrow: boolean, isDwArrow: boolean, evnt: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
-      const reactData = $xeTable as unknown as TableReactData
       const internalData = $xeTable as unknown as TableInternalData
 
       const { treeConfig } = props
-      const { currentRow } = reactData
-      const { afterFullData } = internalData
+      const { afterFullData, currentRow } = internalData
       const treeOpts = $xeTable.computeTreeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       let targetRow

package/packages/table/src/body.ts

@@ -350,6 +350,18 @@ function renderTdColumn (
     if (treeConfig) {
       tdVNs.push(...renderLine(h, $xeTable, rowid, cellParams, cellHeight))
     }
+    const clVNs: VxeComponentSlotType[] = []
+    if (!isVNPreEmptyStatus) {
+      clVNs.push(
+        h('div', {
+          attrs: {
+            colid,
+            rowid
+          },
+          class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
+        }, column.renderCell(h, cellParams))
+      )
+    }
     tdVNs.push(
       h('div', {
         key: 'tc',
@@ -362,17 +374,7 @@ function renderTdColumn (
         attrs: {
           title: showTitle ? $xeTable.getCellLabel(row, column) : null
         }
-      }, isVNPreEmptyStatus
-        ? []
-        : [
-            h('div', {
-              attrs: {
-                colid,
-                rowid
-              },
-              class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
-            }, column.renderCell(h, cellParams))
-          ])
+      }, clVNs)
     )
     if (showValidTip && errorValidItem) {
       const errRule = errorValidItem.rule
@@ -485,8 +487,8 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   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 = $xeTable.computeCheckboxOpts
   const radioOpts = $xeTable.computeRadioOpts
   const treeOpts = $xeTable.computeTreeOpts
@@ -577,7 +579,8 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
         'row--radio': radioOpts.highlight && 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)
       },
       rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
     ]
@@ -591,7 +594,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
           rowid
         },
         style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) as VxeComponentStyleType : undefined,
-        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,
         on: trOn
       }, tdVNs)
     )

package/packages/table/src/methods.ts

@@ -1006,8 +1006,8 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const internalData = $xeTable as unknown as TableInternalData
 
   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 = $xeTable.$refs.refElem as HTMLDivElement
   if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
@@ -1636,8 +1636,8 @@ function handleReserveStatus ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const internalData = $xeTable as unknown as TableInternalData
 
   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 = $xeTable.computeExpandOpts
   const treeOpts = $xeTable.computeTreeOpts
   const radioOpts = $xeTable.computeRadioOpts
@@ -1661,7 +1661,7 @@ function handleReserveStatus ($xeTable: VxeTableConstructor & VxeTablePrivateMet
     handleCheckedCheckboxRow($xeTable, handleReserveRow($xeTable, internalData.checkboxReserveRowMap), true, true)
   }
   if (currentRow && !fullAllDataRowIdData[getRowid($xeTable, currentRow)]) {
-    reactData.currentRow = null // 刷新当前行状态
+    internalData.currentRow = null // 刷新当前行状态
   }
   // 行展开
   internalData.rowExpandedMaps = expandColumn ? getRecoverRowMaps($xeTable, rowExpandedMaps) : {} // 刷新行展开状态
@@ -3135,9 +3135,11 @@ function handleRecalculateStyle ($xeTable: VxeTableConstructor & VxeTablePrivate
 }
 
 function handleLazyRecalculate ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, reFull: boolean, reWidth: boolean, reHeight: boolean) {
+  const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
   return new Promise<void>(resolve => {
+    const { customStore } = reactData
     const { rceTimeout, rceRunTime } = internalData
     const $xeGanttView = internalData.xeGanttView
     const resizeOpts = $xeTable.computeResizeOpts
@@ -3147,6 +3149,9 @@ function handleLazyRecalculate ($xeTable: VxeTableConstructor & VxeTablePrivateM
       autoCellWidth($xeTable)
       updateRowExpandStyle($xeTable)
     }
+    if (customStore.visible && $xeTable.handleCustomStyle) {
+      $xeTable.handleCustomStyle()
+    }
     if (rceTimeout) {
       clearTimeout(rceTimeout)
       if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -4432,6 +4437,23 @@ function handleColumnVisible (visible: boolean) {
   }
 }
 
+function reUpdateCustomStyleEvent ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: MouseEvent) {
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { customStore } = reactData
+  const customOpts = $xeTable.computeCustomOpts
+  const { popupOptions } = customOpts
+  const { transfer } = popupOptions || {}
+  if (transfer && customStore.visible) {
+    const tableCustom = $xeTable.$refs.refTableCustom as Vue
+    if (tableCustom && $xeTable.handleCustomStyle && !checkTargetElement(evnt.target, [tableCustom.$el as HTMLDivElement], evnt.currentTarget)) {
+      $xeTable.handleCustomStyle().then(() => {
+        $xeTable.handleCustomStyle()
+      })
+    }
+  }
+}
+
 const tableMethods: any = {
   callSlot (slotFunc: any, params: any, h: any, vNodes: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -7151,6 +7173,11 @@ const tableMethods: any = {
     $xeTable.closeFilter()
     $xeTable.closeMenu()
   },
+  handleGlobalScrollEvent (evnt: MouseEvent) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+    reUpdateCustomStyleEvent($xeTable, evnt)
+  },
   /**
    * 全局滚动事件
    */
@@ -7158,7 +7185,9 @@ const tableMethods: any = {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
     $xeTable.closeTooltip()
-    $xeTable.closeMenu()
+    if ($xeTable.closeMenu) {
+      $xeTable.closeMenu()
+    }
   },
   /**
    * 表格键盘事件
@@ -7217,8 +7246,8 @@ const tableMethods: any = {
     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 = $xeTable.computeIsContentMenu
         const bodyMenu = $xeTable.computeBodyMenu
         const keyboardOpts = $xeTable.computeKeyboardOpts
@@ -8672,9 +8701,9 @@ const tableMethods: any = {
   },
   triggerCurrentRowEvent (evnt: Event, params: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { currentRow: oldValue } = reactData
+    const { currentRow: oldValue } = internalData
     const rowOpts = $xeTable.computeRowOpts
     const currentRowOpts = $xeTable.computeCurrentRowOpts
     const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod as any
@@ -8781,12 +8810,11 @@ const tableMethods: any = {
    */
   clearCurrentRow () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
     const $xeGanttView = internalData.xeGanttView
     const el = $xeTable.$refs.refElem as HTMLDivElement
-    reactData.currentRow = null
+    internalData.currentRow = null
     internalData.hoverRow = null
     if (el) {
       XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'))
@@ -8809,11 +8837,9 @@ const tableMethods: any = {
   getCurrentRecord (isFull?: boolean) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const props = $xeTable
-    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { currentRow } = reactData
-    const { fullDataRowIdData, afterFullRowMaps } = internalData
+    const { fullDataRowIdData, afterFullRowMaps, currentRow } = internalData
     const rowOpts = $xeTable.computeRowOpts
     if (rowOpts.isCurrent || props.highlightCurrentRow) {
       const rowid = getRowid($xeTable, currentRow)
@@ -12310,7 +12336,7 @@ const tableMethods: any = {
       rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
     }
     reactData.scrollYTop = scrollYTop
-    reactData.scrollYHeight = ySpaceHeight
+    reactData.scrollYHeight = isScrollYBig ? sYHeight : ySpaceHeight
     reactData.isScrollYBig = isScrollYBig
 
     calcScrollbar($xeTable)
@@ -12383,18 +12409,26 @@ const tableMethods: any = {
   },
   /**
    * 如果有滚动条，则滚动到对应的行
-   * @param {Row} row 行对象
-   * @param {ColumnInfo} column 列配置
    */
-  scrollToRow (row: any, fieldOrColumn?: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo, options?: VxeTableDefines.ScrollToRowConfig) {
+  scrollToRow (rowOrRowid: any, fieldOrColumn?: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo, options?: VxeTableDefines.ScrollToRowConfig) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const props = $xeTable
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
     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))

package/packages/table/src/table.ts

@@ -1953,6 +1953,7 @@ export default {
     globalEvents.on($xeTable, 'mousewheel', this.handleGlobalMousewheelEvent)
     globalEvents.on($xeTable, 'keydown', this.handleGlobalKeydownEvent)
     globalEvents.on($xeTable, 'resize', this.handleGlobalResizeEvent)
+    globalEvents.on($xeTable, 'scroll', this.handleGlobalScrollEvent)
     globalEvents.on($xeTable, 'contextmenu', this.handleGlobalContextmenuEvent)
     $xeTable.preventEvent(null, 'created')
   },
@@ -2096,6 +2097,10 @@ export default {
     if (popupWrapperEl && popupWrapperEl.parentElement) {
       popupWrapperEl.parentElement.removeChild(popupWrapperEl)
     }
+    const customPopupToElem = $xeTable.$refs.refCustomPopupToElem as HTMLDivElement
+    if (customPopupToElem && customPopupToElem.parentElement) {
+      customPopupToElem.parentElement.removeChild(customPopupToElem)
+    }
 
     const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
     if (tableViewportEl) {
@@ -2118,6 +2123,7 @@ export default {
     globalEvents.off($xeTable, 'mousewheel')
     globalEvents.off($xeTable, 'keydown')
     globalEvents.off($xeTable, 'resize')
+    globalEvents.off($xeTable, 'scroll')
     globalEvents.off($xeTable, 'contextmenu')
 
     $xeTable.preventEvent(null, 'beforeDestroy')
@@ -2175,8 +2181,6 @@ export default {
     const columnDragOpts = $xeTable.computeColumnDragOpts
     const scrollbarXToTop = $xeTable.computeScrollbarXToTop
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
-    const customSimpleMode = $xeTable.computeCustomSimpleMode
-    const showCustomSimpleOutside = customSimpleMode === 'outside'
     const { isCrossTableDrag } = rowDragOpts
     const tbOns: {
       contextmenu: (...args: any[]) => void
@@ -2329,18 +2333,6 @@ export default {
                 })
               ]
             : []),
-          /**
-           * 自定义列
-           */
-          !showCustomSimpleOutside && initStore.custom
-            ? h(TableCustomPanelComponent, {
-              key: 'cs',
-              ref: 'refTableCustom',
-              props: {
-                customStore
-              }
-            })
-            : renderEmptyElement($xeTable),
           /**
            * 加载中
            */
@@ -2373,15 +2365,16 @@ export default {
         ])
       ]),
       h('div', {
-        key: 'tpw'
+        key: 'fpw',
+        ref: 'refCustomContainerElem'
       }, [
         h('div', {
-          ref: 'refPopupWrapperElem'
+          ref: 'refCustomPopupToElem'
         }, [
           /**
            * 自定义列
            */
-          showCustomSimpleOutside && initStore.custom
+          initStore.custom
             ? h(TableCustomPanelComponent, {
               key: 'cs',
               ref: 'refTableCustom',
@@ -2389,7 +2382,15 @@ export default {
                 customStore
               }
             })
-            : renderEmptyElement($xeTable),
+            : renderEmptyElement($xeTable)
+        ])
+      ]),
+      h('div', {
+        key: 'tpw'
+      }, [
+        h('div', {
+          ref: 'refPopupWrapperElem'
+        }, [
           /**
            * 筛选
            */
@@ -2469,7 +2470,10 @@ export default {
               minWidth: tableTipConfig.minWidth,
               minHeight: tableTipConfig.minHeight,
               maxWidth: tableTipConfig.maxWidth,
-              maxHeight: tableTipConfig.maxHeight
+              maxHeight: tableTipConfig.maxHeight,
+              placement: tableTipConfig.placement,
+              defaultPlacement: tableTipConfig.defaultPlacement,
+              popupClassName: tableTipConfig.popupClassName
             },
             scopedSlots: currTooltipSlot
               ? {

package/packages/table/src/util.ts

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

package/packages/ui/index.ts

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