vxe-table 4.16.15 → 4.16.16

package/packages/table/src/table.ts

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils'
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
-import { createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight } from './util'
+import { createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime'
 import { warnLog, errLog } from '../../ui/src/log'
@@ -350,6 +350,7 @@ export default defineVxeComponent({
     const refTableRightFooter = ref() as Ref<ComponentPublicInstance>
 
     const refTeleportWrapper = ref<HTMLDivElement>()
+    const refPopupWrapperElem = ref<HTMLDivElement>()
 
     const refLeftContainer = ref() as Ref<HTMLDivElement>
     const refRightContainer = ref() as Ref<HTMLDivElement>
@@ -4025,6 +4026,10 @@ export default defineVxeComponent({
           if ($xeTable.handleUpdateCustomColumn) {
             $xeTable.handleUpdateCustomColumn()
           }
+          const columnOpts = computeColumnOpts.value
+          if (props.showCustomHeader && reactData.isGroup && (columnOpts.resizable || props.resizable)) {
+            warnLog('vxe.error.notConflictProp', ['show-custom-header & colgroup', 'column-config.resizable=false'])
+          }
           reactData.isColLoading = false
           return handleLazyRecalculate(false, true, true)
         })
@@ -8572,18 +8577,16 @@ export default defineVxeComponent({
         const scrollbarXToTop = computeScrollbarXToTop.value
         const { clientX: dragClientX } = evnt
         const dragBtnElem = evnt.target as HTMLDivElement
+        let cell = dragBtnElem.parentElement as HTMLTableCellElement | null
         let resizeColumn = column
         const isDragGroupCol = column.children && column.children.length
         if (isDragGroupCol) {
-          XEUtils.eachTree(column.children, childColumn => {
-            resizeColumn = childColumn
-          })
-        }
-        let cell = dragBtnElem.parentElement as HTMLTableCellElement | null
-        if (isDragGroupCol) {
-          const trEl = cell ? cell.parentElement as HTMLTableRowElement : null
-          const theadEl = trEl ? trEl.parentElement as HTMLTableElement : null
-          cell = theadEl ? theadEl.querySelector<HTMLTableCellElement>(`.vxe-header--column[colid="${resizeColumn.id}"]`) : null
+          resizeColumn = getLastChildColumn(column)
+          if (isDragGroupCol) {
+            const trEl = cell ? cell.parentElement as HTMLTableRowElement : null
+            const theadEl = trEl ? trEl.parentElement as HTMLTableElement : null
+            cell = theadEl ? theadEl.querySelector<HTMLTableCellElement>(`.vxe-header--column[colid="${resizeColumn.id}"]`) : null
+          }
         }
         if (!cell) {
           return
@@ -12272,7 +12275,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 } = internalData
+      const { teleportToWrapperElem, popupToWrapperElem } = internalData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
       const tipSlots = {
@@ -12478,16 +12481,38 @@ export default defineVxeComponent({
             ])
           ])
         ]),
-        /**
-         * 筛选
-         */
-        initStore.filter
-          ? h(TableFilterPanelComponent, {
-            key: 'tf',
-            ref: refTableFilter,
-            filterStore
-          })
-          : renderEmptyElement($xeTable),
+        h('div', {
+          key: 'tpw'
+        }, [
+          h(Teleport, {
+            to: popupToWrapperElem,
+            disabled: !($xeGGWrapper && popupToWrapperElem)
+          }, [
+            h('div', {
+              ref: refPopupWrapperElem
+            }, [
+              /**
+               * 筛选
+               */
+              initStore.filter
+                ? h(TableFilterPanelComponent, {
+                  key: 'tf',
+                  ref: refTableFilter,
+                  filterStore
+                })
+                : renderEmptyElement($xeTable),
+              /**
+               * 快捷菜单
+               */
+              isContentMenu
+                ? h(TableMenuPanelComponent, {
+                  key: 'tm',
+                  ref: refTableMenu
+                })
+                : renderEmptyElement($xeTable)
+            ])
+          ])
+        ]),
         /**
          * 导入
          */
@@ -12508,15 +12533,6 @@ export default defineVxeComponent({
             storeData: reactData.exportStore
           })
           : renderEmptyElement($xeTable),
-        /**
-         * 快捷菜单
-         */
-        isContentMenu
-          ? h(TableMenuPanelComponent, {
-            key: 'tm',
-            ref: refTableMenu
-          })
-          : renderEmptyElement($xeTable),
         /**
          * 提示相关
          */
@@ -12825,6 +12841,13 @@ export default defineVxeComponent({
           internalData.teleportToWrapperElem = classifyWrapperEl
         }
       }
+      if ($xeGGWrapper) {
+        const { refPopupContainerElem } = $xeGGWrapper.getRefMaps()
+        const popupContainerEl = refPopupContainerElem.value
+        if (popupContainerEl) {
+          internalData.popupToWrapperElem = popupContainerEl
+        }
+      }
 
       if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
         initTpImg()

package/packages/table/src/util.ts

@@ -130,6 +130,7 @@ export function createInternalData (): TableInternalData {
     tFooterHeight: 0,
 
     teleportToWrapperElem: null,
+    popupToWrapperElem: null,
 
     inited: false,
     tooltipTimeout: null,
@@ -611,6 +612,22 @@ export function getRootColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMe
   return column
 }
 
+export function getFirstChildColumn (column: VxeTableDefines.ColumnInfo): VxeTableDefines.ColumnInfo {
+  const { children } = column
+  if (children && children.length) {
+    return getFirstChildColumn(XEUtils.first(children))
+  }
+  return column
+}
+
+export function getLastChildColumn (column: VxeTableDefines.ColumnInfo): VxeTableDefines.ColumnInfo {
+  const { children } = column
+  if (children && children.length) {
+    return getFirstChildColumn(XEUtils.last(children))
+  }
+  return column
+}
+
 const lineOffsetSizes = {
   mini: 3,
   small: 2,
@@ -618,7 +635,7 @@ const lineOffsetSizes = {
   large: 0
 }
 
-const countTreeExpand = (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) => {
+function countTreeExpand (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) {
   let count = 1
   if (!prevRow) {
     return count
@@ -641,7 +658,7 @@ const countTreeExpand = (prevRow: any, params: VxeTableDefines.CellRenderBodyPar
   return count
 }
 
-export const getOffsetSize = ($xeTable: VxeTableConstructor) => {
+export function getOffsetSize ($xeTable: VxeTableConstructor) {
   const { computeSize } = $xeTable.getComputeMaps()
   const vSize = computeSize.value
   if (vSize) {

package/packages/ui/index.ts

@@ -99,9 +99,11 @@ VxeUI.setConfig({
     footerCellConfig: {
       height: 'unset'
     },
-    // menuConfig: {
-    //   visibleMethod () {}
-    // },
+    menuConfig: {
+      // visibleMethod () {},
+      // transfer: false,
+      destroyOnClose: true
+    },
     customConfig: {
       // enabled: false,
       allowVisible: true,
@@ -148,8 +150,9 @@ VxeUI.setConfig({
     filterConfig: {
       // remote: false,
       // filterMethod: null,
-      // destroyOnClose: false,
       // isEvery: false,
+      // transfer: false,
+      destroyOnClose: true,
       multiple: true,
       showIcon: true
     },

package/styles/components/grid.scss

@@ -1,6 +1,5 @@
 .vxe-grid {
   position: relative;
-  overflow: auto;
   display: flex;
   flex-direction: column;
   &.is--loading {