vxe-table 3.18.1 → 3.18.3

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

@@ -4,7 +4,7 @@ import { getDomNode, getAbsolutePos, getEventTargetNode } from '../../../ui/src/
 import { isEnableConf, hasChildrenList } from '../../../ui/src/utils'
 import { warnLog } from '../../../ui/src/log'
 
-import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData } from '../../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData, TableReactData } from '../../../../types'
 
 const { menus, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI
 
@@ -14,17 +14,20 @@ export default {
      * 关闭快捷菜单
      */
     _closeMenu () {
-      Object.assign(this.ctxMenuStore, {
+      const $xeTable = this as unknown as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+
+      Object.assign(reactData.ctxMenuStore, {
         visible: false,
         selected: null,
         selectChild: null,
         showChild: false
       })
-      return this.$nextTick()
+      return $xeTable.$nextTick()
     },
     // 处理菜单的移动
     moveCtxMenu (evnt: KeyboardEvent, ctxMenuStore: any, property: 'selectChild' | 'selected', hasOper: boolean, operRest: any, menuList: any[]) {
-      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const $xeTable = this as unknown as VxeTableConstructor & VxeTablePrivateMethods
 
       let selectItem
       const selectIndex = XEUtils.findIndexOf(menuList, item => ctxMenuStore[property] === item)
@@ -59,30 +62,40 @@ export default {
      * 快捷菜单事件处理
      */
     handleGlobalContextmenuEvent (evnt: any) {
-      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const $xeTable = this as unknown as VxeTableConstructor & VxeTablePrivateMethods
       const $xeGrid = $xeTable.$xeGrid
       const $xeGantt = $xeTable.$xeGantt
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
       const internalData = $xeTable as unknown as TableInternalData
 
-      const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this
-      const { selected } = editStore
+      const { xID } = $xeTable
+
+      const { mouseConfig, menuConfig } = props
+      const { editStore, ctxMenuStore } = reactData
+      const { visibleColumn } = internalData
       const tableFilter = $xeTable.$refs.refTableFilter
+      const tableMenu = $xeTable.$refs.refTableMenu
+      const mouseOpts = $xeTable.computeMouseOpts
+      const menuOpts = $xeTable.computeMenuOpts
+      const el = $xeTable.$refs.refElem as HTMLDivElement
+      const { selected } = editStore
       const layoutList = ['header', 'body', 'footer']
-      if (isEnableConf(menuConfig) || contextMenu) {
-        if (ctxMenuStore.visible && $refs.refTableMenu && getEventTargetNode(evnt, $refs.refTableMenu.$el).flag) {
+      if (isEnableConf(menuConfig)) {
+        if (ctxMenuStore.visible && tableMenu && getEventTargetNode(evnt, (tableMenu as any).$el).flag) {
           evnt.preventDefault()
           return
         }
         if (internalData._keyCtx) {
           const type = 'body'
-          const params: any = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt }
+          const params: any = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt }
           // 如果开启单元格区域
           if (mouseConfig && mouseOpts.area) {
-            const activeArea = this.getActiveCellArea()
+            const activeArea = $xeTable.getActiveCellArea()
             if (activeArea && activeArea.row && activeArea.column) {
               params.row = activeArea.row
               params.column = activeArea.column
-              this.handleOpenMenuEvent(evnt, type, params)
+              $xeTable.handleOpenMenuEvent(evnt, type, params)
               return
             }
           } else if (mouseConfig && mouseOpts.selected) {
@@ -90,19 +103,19 @@ export default {
             if (selected.row && selected.column) {
               params.row = selected.row
               params.column = selected.column
-              this.handleOpenMenuEvent(evnt, type, params)
+              $xeTable.handleOpenMenuEvent(evnt, type, params)
               return
             }
           }
         }
         // 分别匹配表尾、内容、表尾的快捷菜单
         for (let index = 0; index < layoutList.length; index++) {
-          const layout = layoutList[index]
-          const columnTargetNode = getEventTargetNode(evnt, this.$el, `vxe-${layout}--column`, (target: any) => {
+          const layout = layoutList[index] as 'header' | 'body' | 'footer'
+          const columnTargetNode = getEventTargetNode(evnt, el, `vxe-${layout}--column`, (target: any) => {
             // target=td|th，直接向上找 table 去匹配即可
-            return target.parentNode.parentNode.parentNode.getAttribute('xid') === tId
+            return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID
           })
-          const params: any = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: this.visibleColumn.slice(0), $event: evnt }
+          const params: any = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt }
           if (columnTargetNode.flag) {
             const cell = columnTargetNode.targetElem
             const columnNodeRest = $xeTable.getColumnNode(cell)
@@ -121,66 +134,73 @@ export default {
               }
             }
             const eventType = `${typePrefix}cell-menu` as 'cell-menu' | 'header-cell-menu' | 'footer-cell-menu'
-            this.handleOpenMenuEvent(evnt, layout, params)
+            $xeTable.handleOpenMenuEvent(evnt, layout, params)
             // 在 v4 中废弃事件 cell-context-menu、header-cell-context-menu、footer-cell-context-menu
-            if (this.$listeners[`${typePrefix}cell-context-menu`]) {
+            if ($xeTable.$listeners[`${typePrefix}cell-context-menu`]) {
               warnLog('vxe.error.delEvent', [`${typePrefix}cell-context-menu`, `${typePrefix}cell-menu`])
               $xeTable.dispatchEvent(`${typePrefix}cell-context-menu` as any, params, evnt)
             } else {
               $xeTable.dispatchEvent(eventType, params, evnt)
             }
             return
-          } else if (getEventTargetNode(evnt, this.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === tId).flag) {
-            if (ctxMenuOpts.trigger === 'cell') {
+          } else if (getEventTargetNode(evnt, $xeTable.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === xID).flag) {
+            if (menuOpts.trigger === 'cell') {
               evnt.preventDefault()
             } else {
-              this.handleOpenMenuEvent(evnt, layout, params)
+              $xeTable.handleOpenMenuEvent(evnt, layout, params)
             }
             return
           }
         }
       }
       if (tableFilter && !getEventTargetNode(evnt, (tableFilter as any).$el).flag) {
-        this.closeFilter()
+        $xeTable.closeFilter()
       }
-      this.closeMenu()
+      $xeTable.closeMenu()
     },
     /**
      * 显示快捷菜单
      */
-    handleOpenMenuEvent (evnt: any, type: any, params: any) {
-      const { isCtxMenu, ctxMenuStore, ctxMenuOpts } = this
-      const config = ctxMenuOpts[type]
-      const visibleMethod = ctxMenuOpts.visibleMethod
+    handleOpenMenuEvent (evnt: any, type: 'header' | 'body' | 'footer', params: any) {
+      const $xeTable = this as unknown as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const { ctxMenuStore } = reactData
+      const isMenu = $xeTable.computeIsMenu
+      const menuOpts = $xeTable.computeMenuOpts
+      const config = menuOpts[type]
+      const visibleMethod = menuOpts.visibleMethod
       if (config) {
         const { options, disabled } = config
         if (disabled) {
           evnt.preventDefault()
-        } else if (isCtxMenu && options && options.length) {
+        } else if (isMenu && options && options.length) {
           params.options = options
-          this.preventEvent(evnt, 'event.showMenu', params, () => {
+          $xeTable.preventEvent(evnt, 'event.showMenu', params, () => {
             if (!visibleMethod || visibleMethod(params)) {
               evnt.preventDefault()
-              this.updateZindex()
+              $xeTable.updateZindex()
               const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
               let top = evnt.clientY + scrollTop
               let left = evnt.clientX + scrollLeft
               const handleVisible = () => {
+                internalData._currMenuParams = params
                 Object.assign(ctxMenuStore, {
-                  args: params,
                   visible: true,
                   list: options,
                   selected: null,
                   selectChild: null,
                   showChild: false,
                   style: {
-                    zIndex: this.tZindex,
+                    zIndex: internalData.tZindex,
                     top: `${top}px`,
                     left: `${left}px`
                   }
                 })
-                this.$nextTick(() => {
-                  const ctxElem = this.$refs.refTableMenu.$el
+                $xeTable.$nextTick(() => {
+                  const tableMenu = $xeTable.$refs.refTableMenu
+                  const ctxElem = (tableMenu as any).$el
                   const clientHeight = ctxElem.clientHeight
                   const clientWidth = ctxElem.clientWidth
                   const { boundingTop, boundingLeft } = getAbsolutePos(ctxElem)
@@ -196,27 +216,32 @@ export default {
               }
               const { keyboard, row, column } = params
               if (keyboard && row && column) {
-                this.scrollToRow(row, column).then(() => {
-                  const cell = this.getCellElement(row, column)
-                  const { boundingTop, boundingLeft } = getAbsolutePos(cell)
-                  top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2)
-                  left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2)
+                $xeTable.scrollToRow(row, column).then(() => {
+                  const cell = $xeTable.getCellElement(row, column)
+                  if (cell) {
+                    const { boundingTop, boundingLeft } = getAbsolutePos(cell)
+                    top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2)
+                    left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2)
+                  }
                   handleVisible()
                 })
               } else {
                 handleVisible()
               }
             } else {
-              this.closeMenu()
+              $xeTable.closeMenu()
             }
           })
         }
       }
-      this.closeFilter()
+      $xeTable.closeFilter()
     },
     ctxMenuMouseoverEvent (evnt: any, item: any, child: any) {
+      const $xeTable = this as unknown as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+
       const menuElem = evnt.currentTarget
-      const ctxMenuStore = this.ctxMenuStore
+      const { ctxMenuStore } = reactData
       evnt.preventDefault()
       evnt.stopPropagation()
       ctxMenuStore.selected = item
@@ -224,7 +249,7 @@ export default {
       if (!child) {
         ctxMenuStore.showChild = hasChildrenList(item)
         if (ctxMenuStore.showChild) {
-          this.$nextTick(() => {
+          $xeTable.$nextTick(() => {
             const childWrapperElem = menuElem.nextElementSibling
             if (childWrapperElem) {
               const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(menuElem)
@@ -254,7 +279,10 @@ export default {
       }
     },
     ctxMenuMouseoutEvent (evnt: any, item: any) {
-      const ctxMenuStore = this.ctxMenuStore
+      const $xeTable = this as unknown as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { ctxMenuStore } = reactData
       if (!item.children) {
         ctxMenuStore.selected = null
       }
@@ -264,26 +292,27 @@ export default {
      * 快捷菜单点击事件
      */
     ctxMenuLinkEvent (evnt: any, menu: any) {
-      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const $xeTable = this as unknown as VxeTableConstructor & VxeTablePrivateMethods
       const $xeGrid = $xeTable.$xeGrid
       const $xeGantt = $xeTable.$xeGantt
+      const internalData = $xeTable as unknown as TableInternalData
 
       // 如果一级菜单有配置 code 则允许点击，否则不能点击
       if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
         const gMenuOpts = menus.get(menu.code)
-        const params = Object.assign({ menu, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt }, this.ctxMenuStore.args)
+        const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt })
         if (gMenuOpts && gMenuOpts.menuMethod) {
           gMenuOpts.menuMethod(params, evnt)
         }
         // 在 v4 中废弃事件 context-menu-click
-        if (this.$listeners['context-menu-click']) {
+        if ($xeTable.$listeners['context-menu-click']) {
           warnLog('vxe.error.delEvent', ['context-menu-click', 'menu-click'])
           $xeTable.dispatchEvent('context-menu-click' as any, params, evnt)
         } else {
           $xeTable.dispatchEvent('menu-click', params, evnt)
         }
-        this.closeMenu()
+        $xeTable.closeMenu()
       }
     }
-  } as any
+  }
 }

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

@@ -2,9 +2,9 @@ import { CreateElement } from 'vue'
 import { VxeUI } from '../../../ui'
 import { getFuncText } from '../../../ui/src/utils'
 
-import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods, TableReactData } from '../../../../types'
 
-const { getIcon } = VxeUI
+const { getIcon, renderEmptyElement } = VxeUI
 
 export default {
   name: 'VxeTableMenuPanel',
@@ -23,16 +23,18 @@ export default {
   },
   render (this: any, h: CreateElement) {
     const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const tableReactData = $xeTable as unknown as TableReactData
 
-    const { _e, ctxMenuOpts, ctxMenuStore } = this
+    const { ctxMenuStore } = tableReactData
+    const menuOpts = $xeTable.computeMenuOpts
     return h('div', {
-      class: ['vxe-table--context-menu-wrapper', ctxMenuOpts.className, {
+      class: ['vxe-table--context-menu-wrapper', menuOpts.className, {
         'is--visible': ctxMenuStore.visible
       }],
       style: ctxMenuStore.style
     }, ctxMenuStore.list.map((options: any, gIndex: any) => {
       return options.every((item: any) => item.visible === false)
-        ? _e()
+        ? renderEmptyElement($xeTable)
         : h('ul', {
           class: 'vxe-context-menu--option-wrapper',
           key: gIndex
@@ -70,7 +72,7 @@ export default {
                   h('i', {
                     class: prefixOpts.icon || item.prefixIcon
                   }),
-                  prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : _e()
+                  prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
                 ]),
                 h('span', {
                   class: 'vxe-context-menu--link-content',
@@ -84,7 +86,7 @@ export default {
                   h('i', {
                     class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
                   }),
-                  suffixOpts.content ? h('span', `${suffixOpts.content}`) : _e()
+                  suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
                 ])
               ]),
               hasChildMenus
@@ -125,7 +127,7 @@ export default {
                           h('i', {
                             class: childPrefixOpts.icon || child.prefixIcon
                           }),
-                          childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : _e()
+                          childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
                         ]),
                         h('span', {
                           class: 'vxe-context-menu--link-content',
@@ -139,7 +141,7 @@ export default {
                           h('i', {
                             class: childSuffixOpts.icon
                           }),
-                          childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : _e()
+                          childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
                         ])
                       ])
                     ])

package/packages/table/src/body.ts

@@ -177,14 +177,13 @@ function renderTdColumn (
   // hover 进入事件
   if (showTitle || showTooltip || showAllTip || tooltipConfig) {
     tdOns.mouseenter = (evnt: MouseEvent) => {
-      if (isVMScrollProcess($xeTable)) {
-        return
-      }
-      if (showTitle) {
-        updateCellTitle(evnt.currentTarget, column)
-      } else if (showTooltip || showAllTip) {
-        // 如果配置了显示 tooltip
-        $xeTable.triggerBodyTooltipEvent(evnt, cellParams)
+      if (!isVMScrollProcess($xeTable)) {
+        if (showTitle) {
+          updateCellTitle(evnt.currentTarget, column)
+        } else if (showTooltip || showAllTip) {
+          // 如果配置了显示 tooltip
+          $xeTable.triggerBodyTooltipEvent(evnt, cellParams)
+        }
       }
       $xeTable.dispatchEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
     }
@@ -192,11 +191,10 @@ function renderTdColumn (
   // hover 退出事件
   if (showTooltip || showAllTip || tooltipConfig) {
     tdOns.mouseleave = (evnt: MouseEvent) => {
-      if (isVMScrollProcess($xeTable)) {
-        return
-      }
-      if (showTooltip || showAllTip) {
-        $xeTable.handleTargetLeaveEvent(evnt)
+      if (!isVMScrollProcess($xeTable)) {
+        if (showTooltip || showAllTip) {
+          $xeTable.handleTargetLeaveEvent(evnt)
+        }
       }
       $xeTable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
     }

package/packages/table/src/column.ts

@@ -55,9 +55,11 @@ export const columnProps = {
   // 给表尾单元格附加 className
   footerClassName: [String, Function],
   // 格式化显示内容
-  formatter: [Function, Array, String],
+  formatter: [Function, Array, String] as PropType<VxeColumnPropTypes.Formatter<any>>,
+  // 格式化表头显示内容
+  headerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.HeaderFormatter>,
   // 格式化表尾显示内容
-  footerFormatter: [Function, Array, String],
+  footerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.FooterFormatter>,
   // 是否显示间距
   padding: {
     type: Boolean as PropType<VxeColumnPropTypes.Padding>,

package/packages/table/src/columnInfo.ts

@@ -93,6 +93,7 @@ export class ColumnInfo {
       headerClassName: _vm.headerClassName,
       footerClassName: _vm.footerClassName,
       formatter,
+      headerFormatter: _vm.headerFormatter,
       footerFormatter: _vm.footerFormatter,
       padding: _vm.padding,
       verticalAlign: _vm.verticalAlign,

package/packages/table/src/footer.ts

@@ -34,7 +34,7 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
   const footerCellOpts = $xeTable.computeFooterCellOpts
   const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight
 
-  return tableColumn.map((column: any, $columnIndex: any) => {
+  return tableColumn.map((column, $columnIndex) => {
     const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
     const colid = column.id
     const colRest = fullColumnIdData[colid] || {}
@@ -240,8 +240,8 @@ export default {
       default: null
     }
   },
-  mounted (this: any) {
-    const _vm = this
+  mounted () {
+    const _vm = this as any
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
@@ -257,8 +257,9 @@ export default {
     elemStore[`${prefix}xSpace`] = _vm.$refs.refFooterXSpace
   },
   destroyed () {
-    const props = this
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const _vm = this as any
+    const props = _vm
+    const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
 
     const { fixedType } = props
@@ -272,8 +273,9 @@ export default {
     elemStore[`${prefix}xSpace`] = null
   },
   render (h: CreateElement) {
-    const props = this
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const _vm = this as any
+    const props = _vm
+    const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableProps = $xeTable
     const tableReactData = $xeTable as unknown as TableReactData
     const tableInternalData = $xeTable as unknown as TableInternalData
@@ -385,9 +387,9 @@ export default {
          */
           h('tfoot', {
             ref: 'refFooterTFoot'
-          }, renderHeads(h, this, isOptimizeMode, renderColumnList))
+          }, renderHeads(h, _vm, isOptimizeMode, renderColumnList))
         ])
       ])
     ])
   }
-} as any
+}