vxe-table 3.18.14 → 3.18.16

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

@@ -170,7 +170,7 @@ export default {
       const isContentMenu = $xeTable.computeIsContentMenu
       const menuOpts = $xeTable.computeMenuOpts
       const config = menuOpts[type]
-      const visibleMethod = menuOpts.visibleMethod
+      const { transfer, visibleMethod } = menuOpts
       if (config) {
         const { options, disabled } = config
         if (disabled) {
@@ -181,9 +181,17 @@ export default {
             if (!visibleMethod || visibleMethod(params)) {
               evnt.preventDefault()
               $xeTable.updateZindex()
+              const el = $xeTable.$refs.refElem as HTMLDivElement
+              const tableRect = el.getBoundingClientRect()
               const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
-              let top = evnt.clientY + scrollTop
-              let left = evnt.clientX + scrollLeft
+
+              let top = evnt.clientY - tableRect.y
+              let left = evnt.clientX - tableRect.x
+              if (transfer) {
+                top = evnt.clientY + scrollTop
+                left = evnt.clientX + scrollLeft
+              }
+
               const handleVisible = () => {
                 internalData._currMenuParams = params
                 Object.assign(ctxMenuStore, {

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

@@ -12,143 +12,163 @@ export default {
     ctxMenuStore: Object,
     ctxMenuOpts: Object
   },
+  inject: {
+    $xeTable: {
+      default: null
+    }
+  },
   mounted () {
-    document.body.appendChild(this.$el)
+    const $xeMenuPanel = this
+    const $xeTable = $xeMenuPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+    const menuOpts = $xeTable.computeMenuOpts
+    const { transfer } = menuOpts
+    const el = this.$refs.refElem as HTMLDivElement
+
+    if (transfer && el) {
+      document.body.appendChild(el)
+    }
   },
   beforeDestroy () {
-    const { $el } = this
-    if ($el.parentNode) {
-      $el.parentNode.removeChild($el)
+    const el = this.$refs.refElem as HTMLDivElement
+
+    if (el && el.parentNode) {
+      el.parentNode.removeChild(el)
     }
   },
   render (this: any, h: CreateElement) {
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const $xeMenuPanel = this
+    const $xeTable = $xeMenuPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
     const tableReactData = $xeTable as unknown as TableReactData
 
     const { ctxMenuStore } = tableReactData
     const menuOpts = $xeTable.computeMenuOpts
+    const { destroyOnClose } = menuOpts
+    const { visible, list, className } = ctxMenuStore
     return h('div', {
-      class: ['vxe-table--context-menu-wrapper', menuOpts.className, {
-        'is--visible': ctxMenuStore.visible
+      ref: 'refElem',
+      class: ['vxe-table--context-menu-wrapper', className, {
+        'is--visible': visible
       }],
       style: ctxMenuStore.style
-    }, ctxMenuStore.list.map((options: any, gIndex: any) => {
-      return options.every((item: any) => item.visible === false)
-        ? renderEmptyElement($xeTable)
-        : h('ul', {
-          class: 'vxe-context-menu--option-wrapper',
-          key: gIndex
-        }, options.map((item: any, index: any) => {
-          const hasChildMenus = item.children && item.children.some((child: any) => child.visible !== false)
-          const prefixOpts = Object.assign({}, item.prefixConfig)
-          const suffixOpts = Object.assign({}, item.suffixConfig)
-          const menuContent = getFuncText(item.name)
-          return item.visible === false
-            ? null
-            : h('li', {
-              class: [item.className, {
-                'link--disabled': item.disabled,
-                'link--active': item === ctxMenuStore.selected
-              }],
-              key: `${gIndex}_${index}`
-            }, [
-              h('a', {
-                class: 'vxe-context-menu--link',
-                on: {
-                  click (evnt: any) {
-                    $xeTable.ctxMenuLinkEvent(evnt, item)
-                  },
-                  mouseover (evnt: any) {
-                    $xeTable.ctxMenuMouseoverEvent(evnt, item)
-                  },
-                  mouseout (evnt: any) {
-                    $xeTable.ctxMenuMouseoutEvent(evnt, item)
-                  }
-                }
+    }, (destroyOnClose ? visible : true)
+      ? list.map((options, gIndex) => {
+        return options.every((item) => item.visible === false)
+          ? renderEmptyElement($xeTable)
+          : h('ul', {
+            class: 'vxe-context-menu--option-wrapper',
+            key: gIndex
+          }, options.map((item, index) => {
+            const hasChildMenus = item.children && item.children.some((child: any) => child.visible !== false)
+            const prefixOpts = Object.assign({}, item.prefixConfig)
+            const suffixOpts = Object.assign({}, item.suffixConfig)
+            const menuContent = getFuncText(item.name)
+            return item.visible === false
+              ? renderEmptyElement($xeTable)
+              : h('li', {
+                class: [item.className, {
+                  'link--disabled': item.disabled,
+                  'link--active': item === ctxMenuStore.selected
+                }],
+                key: `${gIndex}_${index}`
               }, [
-                h('div', {
-                  class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
-                }, [
-                  h('i', {
-                    class: prefixOpts.icon || item.prefixIcon
-                  }),
-                  prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
-                ]),
-                h('span', {
-                  class: 'vxe-context-menu--link-content',
-                  attrs: {
-                    title: menuContent
+                h('a', {
+                  class: 'vxe-context-menu--link',
+                  on: {
+                    click (evnt: any) {
+                      $xeTable.ctxMenuLinkEvent(evnt, item)
+                    },
+                    mouseover (evnt: any) {
+                      $xeTable.ctxMenuMouseoverEvent(evnt, item)
+                    },
+                    mouseout (evnt: any) {
+                      $xeTable.ctxMenuMouseoutEvent(evnt, item)
+                    }
                   }
-                }, menuContent),
-                h('div', {
-                  class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
                 }, [
-                  h('i', {
-                    class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
-                  }),
-                  suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
-                ])
-              ]),
-              hasChildMenus
-                ? h('ul', {
-                  class: ['vxe-table--context-menu-clild-wrapper', {
-                    'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
-                  }]
-                }, item.children.map((child: any, cIndex: any) => {
-                  const childPrefixOpts = Object.assign({}, child.prefixConfig)
-                  const childSuffixOpts = Object.assign({}, child.suffixConfig)
-                  const childMenuContent = getFuncText(child.name)
-                  return child.visible === false
-                    ? null
-                    : h('li', {
-                      class: [child.className, {
-                        'link--disabled': child.disabled,
-                        'link--active': child === ctxMenuStore.selectChild
-                      }],
-                      key: `${gIndex}_${index}_${cIndex}`
-                    }, [
-                      h('a', {
-                        class: 'vxe-context-menu--link',
-                        on: {
-                          click (evnt: any) {
-                            $xeTable.ctxMenuLinkEvent(evnt, child)
-                          },
-                          mouseover (evnt: any) {
-                            $xeTable.ctxMenuMouseoverEvent(evnt, item, child)
-                          },
-                          mouseout (evnt: any) {
-                            $xeTable.ctxMenuMouseoutEvent(evnt, item)
-                          }
-                        }
+                  h('div', {
+                    class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
+                  }, [
+                    h('i', {
+                      class: prefixOpts.icon || item.prefixIcon
+                    }),
+                    prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
+                  ]),
+                  h('span', {
+                    class: 'vxe-context-menu--link-content',
+                    attrs: {
+                      title: menuContent
+                    }
+                  }, menuContent),
+                  h('div', {
+                    class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
+                  }, [
+                    h('i', {
+                      class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
+                    }),
+                    suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
+                  ])
+                ]),
+                hasChildMenus
+                  ? h('ul', {
+                    class: ['vxe-table--context-menu-clild-wrapper', {
+                      'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
+                    }]
+                  }, item.children.map((child: any, cIndex: any) => {
+                    const childPrefixOpts = Object.assign({}, child.prefixConfig)
+                    const childSuffixOpts = Object.assign({}, child.suffixConfig)
+                    const childMenuContent = getFuncText(child.name)
+                    return child.visible === false
+                      ? null
+                      : h('li', {
+                        class: [child.className, {
+                          'link--disabled': child.disabled,
+                          'link--active': child === ctxMenuStore.selectChild
+                        }],
+                        key: `${gIndex}_${index}_${cIndex}`
                       }, [
-                        h('div', {
-                          class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
-                        }, [
-                          h('i', {
-                            class: childPrefixOpts.icon || child.prefixIcon
-                          }),
-                          childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
-                        ]),
-                        h('span', {
-                          class: 'vxe-context-menu--link-content',
-                          attrs: {
-                            title: childMenuContent
+                        h('a', {
+                          class: 'vxe-context-menu--link',
+                          on: {
+                            click (evnt: any) {
+                              $xeTable.ctxMenuLinkEvent(evnt, child)
+                            },
+                            mouseover (evnt: any) {
+                              $xeTable.ctxMenuMouseoverEvent(evnt, item, child)
+                            },
+                            mouseout (evnt: any) {
+                              $xeTable.ctxMenuMouseoutEvent(evnt, item)
+                            }
                           }
-                        }, childMenuContent),
-                        h('div', {
-                          class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
                         }, [
-                          h('i', {
-                            class: childSuffixOpts.icon
-                          }),
-                          childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
+                          h('div', {
+                            class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
+                          }, [
+                            h('i', {
+                              class: childPrefixOpts.icon || child.prefixIcon
+                            }),
+                            childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
+                          ]),
+                          h('span', {
+                            class: 'vxe-context-menu--link-content',
+                            attrs: {
+                              title: childMenuContent
+                            }
+                          }, childMenuContent),
+                          h('div', {
+                            class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
+                          }, [
+                            h('i', {
+                              class: childSuffixOpts.icon
+                            }),
+                            childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
+                          ])
                         ])
                       ])
-                    ])
-                }))
-                : null
-            ])
-        }))
-    }))
+                  }))
+                  : null
+              ])
+          }))
+      })
+      : [])
   }
 } as any

package/packages/table/src/header.ts

@@ -158,7 +158,9 @@ function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMod
       tcStyle.minHeight = `${currCellHeight}px`
     }
 
-    if (isColGroup && !isLastRow) {
+    if (showCustomHeader) {
+      // custom
+    } else if (isColGroup && !isLastRow) {
       const firstCol = getColumnFirstChild(column)
       const lastCol = getColumnLastChild(column)
       if (firstCol && lastCol && firstCol.id !== lastCol.id) {

package/packages/table/src/methods.ts

@@ -3,7 +3,7 @@ import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTarge
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
 import Cell from './cell'
-import { getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight } from './util'
+import { getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime'
 import { warnLog, errLog } from '../../ui/src/log'
@@ -3654,6 +3654,7 @@ function initColumnHierarchy ($xeTable: VxeTableConstructor & VxeTablePrivateMet
 }
 
 function handleInitColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, collectColumn: VxeTableDefines.ColumnInfo[]) {
+  const props = $xeTable
   const $xeToolbar = $xeTable.$refs.$xeToolbar as VxeToolbarConstructor
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
@@ -3693,6 +3694,10 @@ function handleInitColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
       if ($xeTable.handleUpdateCustomColumn) {
         $xeTable.handleUpdateCustomColumn()
       }
+      const columnOpts = $xeTable.computeColumnOpts
+      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($xeTable, false, true, true)
     })
@@ -5903,18 +5908,16 @@ const Methods = {
     const scrollbarXToTop = $xeTable.computeScrollbarXToTop
     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
@@ -10825,7 +10828,7 @@ const Methods = {
       const xThreshold = $xeTable.computeScrollXThreshold
       isLeft = scrollLeft <= 0
       if (!isLeft) {
-        isRight = scrollLeft + bodyWidth >= scrollWidth
+        isRight = scrollLeft + bodyWidth >= scrollWidth - 1
       }
       if (scrollLeft > lastScrollLeft) {
         direction = 'right'
@@ -10845,7 +10848,7 @@ const Methods = {
       const yThreshold = $xeTable.computeScrollYThreshold
       isTop = scrollTop <= 0
       if (!isTop) {
-        isBottom = scrollTop + bodyHeight >= scrollHeight
+        isBottom = scrollTop + bodyHeight >= scrollHeight - 1
       }
       if (scrollTop > lastScrollTop) {
         direction = 'bottom'

package/packages/table/src/table.ts

@@ -1876,7 +1876,9 @@ export default {
     const $xeTable = this
     const props = $xeTable
     const internalData = $xeTable as unknown as TableInternalData
+    const $xeGrid = $xeTable.$xeGrid
     const $xeGantt = $xeTable.$xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
 
     const columnOpts = $xeTable.computeColumnOpts
     const rowOpts = $xeTable.computeRowOpts
@@ -1893,6 +1895,16 @@ export default {
         internalData.teleportToWrapperElem = classifyWrapperEl
       }
     }
+    if ($xeGGWrapper) {
+      const popupContainerElem = $xeGantt.$refs.refPopupContainerElem as HTMLDivElement
+      const popupWrapperEl = $xeTable.$refs.refPopupWrapperElem as HTMLDivElement
+      if (popupContainerElem) {
+        if (popupWrapperEl) {
+          popupContainerElem.appendChild(popupWrapperEl)
+        }
+        internalData.popupToWrapperElem = popupContainerElem
+      }
+    }
 
     if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
       initTpImg()
@@ -1906,11 +1918,11 @@ export default {
       warnLog('vxe.error.reqProp', ['tooltip-config'])
     }
 
-    // 使用已安装的组件，如果未安装则不渲染
-    const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading')
-    const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
-
     $xeTable.$nextTick(() => {
+      // 使用已安装的组件，如果未安装则不渲染
+      const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading')
+      const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
+
       if (props.loading) {
         if (!VxeUILoadingComponent && !this.$scopedSlots.loading) {
           errLog('vxe.error.errProp', ['loading=true', 'loading=false | <template #loading>...</template>'])
@@ -1989,6 +2001,10 @@ export default {
     if (teleportWrapperEl && teleportWrapperEl.parentElement) {
       teleportWrapperEl.parentElement.removeChild(teleportWrapperEl)
     }
+    const popupWrapperEl = $xeTable.$refs.refPopupWrapperElem as HTMLDivElement
+    if (popupWrapperEl && popupWrapperEl.parentElement) {
+      popupWrapperEl.parentElement.removeChild(popupWrapperEl)
+    }
     const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
     if (tableViewportEl) {
       tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent)
@@ -2244,18 +2260,39 @@ export default {
           renderDragTip(h, this)
         ])
       ]),
-      /**
-       * 筛选
-       */
-      initStore.filter
-        ? h(TableFilterPanelComponent, {
-          key: 'tf',
-          ref: 'refTableFilter',
-          props: {
-            filterStore
-          }
-        })
-        : renderEmptyElement($xeTable),
+      h('div', {
+        key: 'tpw'
+      }, [
+        h('div', {
+          ref: 'refPopupWrapperElem'
+        }, [
+          /**
+           * 筛选
+           */
+          initStore.filter
+            ? h(TableFilterPanelComponent, {
+              key: 'tf',
+              ref: 'refTableFilter',
+              props: {
+                filterStore
+              }
+            })
+            : renderEmptyElement($xeTable),
+          /**
+           * 快捷菜单
+           */
+          isContentMenu
+            ? h(TableMenuPanelComponent, {
+              key: 'tm',
+              ref: 'refTableMenu',
+              props: {
+                ctxMenuStore: this.ctxMenuStore,
+                ctxMenuOpts: this.ctxMenuOpts
+              }
+            })
+            : renderEmptyElement($xeTable)
+        ])
+      ]),
       /**
        * 导入
        */
@@ -2280,19 +2317,6 @@ export default {
           }
         })
         : renderEmptyElement($xeTable),
-      /**
-       * 快捷菜单
-       */
-      isContentMenu
-        ? h(TableMenuPanelComponent, {
-          key: 'tm',
-          ref: 'refTableMenu',
-          props: {
-            ctxMenuStore: this.ctxMenuStore,
-            ctxMenuOpts: this.ctxMenuOpts
-          }
-        })
-        : renderEmptyElement($xeTable),
       h('div', {}, [
         /**
          * 提示相关

package/packages/table/src/util.ts

@@ -130,6 +130,7 @@ export function createInternalData (): TableInternalData {
     tFooterHeight: 0,
 
     teleportToWrapperElem: null,
+    popupToWrapperElem: null,
 
     inited: false,
     tooltipTimeout: null,
@@ -529,6 +530,22 @@ export function getColReMinWidth (params: any) {
   return mWidth
 }
 
+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: Record<string, any> = {
   mini: 3,
   small: 2,

package/packages/ui/index.ts

@@ -100,9 +100,11 @@ VxeUI.setConfig({
     footerCellConfig: {
       height: 'unset'
     },
-    // menuConfig: {
-    //   visibleMethod () {}
-    // },
+    menuConfig: {
+      // visibleMethod () {},
+      // transfer: false,
+      destroyOnClose: true
+    },
     customConfig: {
       // enabled: false,
       allowVisible: true,
@@ -149,8 +151,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 {