vxe-table 3.21.20 → 3.21.22

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

@@ -159,7 +159,7 @@ export default {
       }
       return $xeTable.openCustom()
     },
-    _saveCustom () {
+    _saveCustom (isDirectly?: boolean) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const reactData = $xeTable as unknown as TableReactData
       const internalData = $xeTable as unknown as TableInternalData
@@ -167,34 +167,36 @@ export default {
       const { customColumnList, aggHandleFields, rowGroupList } = reactData
       const customOpts = $xeTable.computeCustomOpts
       const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts
-      XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
-        if (parentColumn) {
+      if (!isDirectly) {
+        XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
+          if (parentColumn) {
           // 更新子列信息
-          column.fixed = parentColumn.fixed
-        } else {
-          if (allowSort) {
-            const sortIndex = index + 1
-            column.renderSortNumber = sortIndex
-          }
-          if (allowFixed) {
-            column.fixed = column.renderFixed
+            column.fixed = parentColumn.fixed
+          } else {
+            if (allowSort) {
+              const sortIndex = index + 1
+              column.renderSortNumber = sortIndex
+            }
+            if (allowFixed) {
+              column.fixed = column.renderFixed
+            }
           }
-        }
-        if (allowResizable) {
-          if (column.renderVisible && (!column.children || !column.children.length)) {
-            if (column.renderResizeWidth !== column.renderWidth) {
-              column.resizeWidth = column.renderResizeWidth
-              column.renderWidth = column.renderResizeWidth
+          if (allowResizable) {
+            if (column.renderVisible && (!column.children || !column.children.length)) {
+              if (column.renderResizeWidth !== column.renderWidth) {
+                column.resizeWidth = column.renderResizeWidth
+                column.renderWidth = column.renderResizeWidth
+              }
             }
           }
-        }
-        if (allowVisible) {
-          column.visible = column.renderVisible
-        }
-        if (allowGroup && allowValues) {
-          column.aggFunc = column.renderAggFn
-        }
-      })
+          if (allowVisible) {
+            column.visible = column.renderVisible
+          }
+          if (allowGroup && allowValues) {
+            column.aggFunc = column.renderAggFn
+          }
+        })
+      }
       reactData.isCustomStatus = true
       if (allowGroup && allowValues && !!$xeTable.handlePivotTableAggData) {
         if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
@@ -376,10 +378,12 @@ export default {
       if (customStore.visible) {
         $xeTable.closeCustom()
         emitCustomEvent($xeTable, 'close', evnt)
+        $xeTable.dispatchEvent('custom-close', {}, evnt)
       } else {
         customStore.btnEl = evnt.target
         $xeTable.openCustom()
         emitCustomEvent($xeTable, 'open', evnt)
+        $xeTable.dispatchEvent('custom-open', {}, evnt)
       }
     },
     customOpenEvent (evnt: any) {
@@ -392,6 +396,7 @@ export default {
         customStore.btnEl = evnt.target
         $xeTable.openCustom()
         emitCustomEvent($xeTable, 'open', evnt)
+        $xeTable.dispatchEvent('custom-open', {}, evnt)
       }
     },
     customCloseEvent (evnt: any) {
@@ -403,6 +408,7 @@ export default {
         customStore.activeBtn = false
         $xeTable.closeCustom()
         emitCustomEvent($xeTable, 'close', evnt)
+        $xeTable.dispatchEvent('custom-close', {}, evnt)
       }
     },
     handleUpdateCustomColumn () {

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

@@ -180,7 +180,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeTable.saveCustom()
       $xeTable.closeCustom()
       $xeTable.emitCustomEvent('confirm', $event)
+      $xeTable.dispatchEvent('custom-confirm', {}, $event)
       $xeTable.emitCustomEvent('close', $event)
+      $xeTable.dispatchEvent('custom-close', {}, $event)
     },
     cancelCloseEvent ({ $event }: VxeButtonDefines.ClickEventParams) {
       const $xeTableCustomPanel = this
@@ -188,6 +190,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       $xeTable.closeCustom()
       $xeTable.emitCustomEvent('close', $event)
+      $xeTable.dispatchEvent('custom-close', {}, $event)
     },
     cancelCustomEvent ({ $event }: VxeButtonDefines.ClickEventParams) {
       const $xeTableCustomPanel = this
@@ -196,7 +199,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeTable.cancelCustom()
       $xeTable.closeCustom()
       $xeTable.emitCustomEvent('cancel', $event)
+      $xeTable.dispatchEvent('custom-cancel', {}, $event)
       $xeTable.emitCustomEvent('close', $event)
+      $xeTable.dispatchEvent('custom-close', {}, $event)
     },
     handleResetCustomEvent (evnt: Event) {
       const $xeTableCustomPanel = this
@@ -205,7 +210,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeTable.resetCustom(true)
       $xeTable.closeCustom()
       $xeTable.emitCustomEvent('reset', evnt)
+      $xeTable.dispatchEvent('custom-reset', {}, evnt)
       $xeTable.emitCustomEvent('close', evnt)
+      $xeTable.dispatchEvent('custom-close', {}, evnt)
     },
     resetCustomEvent  (evnt: Event) {
       if (VxeUI.modal) {

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

@@ -11,8 +11,6 @@ const { warnLog, errLog } = createComponentLog('table')
 
 const { getConfig, renderer, getI18n } = VxeUI
 
-const browseObj = XEUtils.browse()
-
 function getEditColumnModel (row: any, column: VxeTableDefines.ColumnInfo) {
   const { model, editRender } = column
   if (editRender) {
@@ -545,7 +543,9 @@ export default {
      * @param {*} records
      */
     _insert (records: any) {
-      return handleInsertRowAt(this, records, null)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      return handleInsertRowAt($xeTable, records, null)
     },
     /**
      * 往表格指定行中插入临时数据
@@ -555,19 +555,29 @@ export default {
      * @returns
      */
     _insertAt (records: any, targetRowOrRowid: any) {
-      return handleInsertRowAt(this, records, targetRowOrRowid)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      return handleInsertRowAt($xeTable, records, targetRowOrRowid)
     },
     _insertNextAt (records: any, targetRowOrRowid: any) {
-      return handleInsertRowAt(this, records, targetRowOrRowid, true)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      return handleInsertRowAt($xeTable, records, targetRowOrRowid, true)
     },
     _insertChild (records: any, parentRowOrParentId: any) {
-      return handleInsertChildRowAt(this, records, parentRowOrParentId, null)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      return handleInsertChildRowAt($xeTable, records, parentRowOrParentId, null)
     },
     _insertChildAt (records: any, parentRowOrParentId: any, targetRowOrRowid: any) {
-      return handleInsertChildRowAt(this, records, parentRowOrParentId, targetRowOrRowid)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      return handleInsertChildRowAt($xeTable, records, parentRowOrParentId, targetRowOrRowid)
     },
     _insertChildNextAt (records: any, parentRowOrParentId: any, targetRowOrRowid: any) {
-      return handleInsertChildRowAt(this, records, parentRowOrParentId, targetRowOrRowid, true)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      return handleInsertChildRowAt($xeTable, records, parentRowOrParentId, targetRowOrRowid, true)
     },
     /**
      * 删除指定行数据
@@ -948,6 +958,7 @@ export default {
       const { editRender } = column
       const editOpts = $xeTable.computeEditOpts
       if (isEnableConf(editRender)) {
+        const browseObj = XEUtils.browse()
         const compRender = renderer.get(editRender.name)
         let autoFocus = editRender.autofocus || editRender.autoFocus
         let autoSelect = editRender.autoSelect || editRender.autoselect

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

@@ -1,9 +1,10 @@
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
-import { getDomNode, getAbsolutePos, getEventTargetNode } from '../../../ui/src/dom'
+import { getDomNode, getAbsolutePos, getEventTargetNode, toCssUnit } from '../../../ui/src/dom'
 import { isEnableConf, hasChildrenList } from '../../../ui/src/utils'
 import { createComponentLog } from '../../../ui/src/log'
 
+import type { VxeComponentStyleType } from 'vxe-pc-ui'
 import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData, TableReactData, VxeTableDefines } from '../../../../types'
 
 const { warnLog } = createComponentLog('table')
@@ -175,7 +176,7 @@ export default {
       const isContentMenu = $xeTable.computeIsContentMenu
       const menuOpts = $xeTable.computeMenuOpts
       const config = menuOpts[type]
-      const { zIndex, transfer, visibleMethod } = menuOpts
+      const { zIndex, transfer, width, visibleMethod } = menuOpts
       if (config) {
         const { options, disabled } = config
         if (disabled) {
@@ -199,17 +200,21 @@ export default {
 
               const handleVisible = () => {
                 internalData._currMenuParams = params
+                const ctxStyle: VxeComponentStyleType = {
+                  zIndex: zIndex || internalData.tZindex,
+                  top: `${top}px`,
+                  left: `${left}px`
+                }
+                if (width) {
+                  ctxStyle['--vxe-ui-table-menu-item-width'] = toCssUnit(width)
+                }
                 Object.assign(ctxMenuStore, {
                   visible: true,
                   list: options,
                   selected: null,
                   selectChild: null,
                   showChild: false,
-                  style: {
-                    zIndex: zIndex || internalData.tZindex,
-                    top: `${top}px`,
-                    left: `${left}px`
-                  }
+                  style: ctxStyle
                 })
                 $xeTable.$nextTick(() => {
                   const tableMenu = $xeTable.$refs.refTableMenu

package/packages/table/src/methods.ts

@@ -16,8 +16,6 @@ const { warnLog, errLog } = createComponentLog('table')
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI
 
-const browseObj = XEUtils.browse()
-
 const supportMaxRow = 5e6
 const customStorageKey = 'VXE_CUSTOM_STORE'
 const maxYHeight = 5e6
@@ -1030,6 +1028,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
     return
   }
+  const browseObj = XEUtils.browse()
   const containerList = ['main', 'left', 'right']
   const { leftList, rightList } = columnStore
   let osbWidth = overflowY ? scrollbarWidth : 0
@@ -3000,11 +2999,14 @@ function handleTooltip ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
     // 如果为 null 使用默认逻辑
     if (XEUtils.eqNull(customContent)) {
       isShow = isOver
+      content = cellText
     } else if (customContent !== '' && customContent !== false) {
       // 如果为 '' | false 则不显示
       isShow = true
+      content = customContent
+    } else {
+      content = cellText
     }
-    content = cellText
   }
   if (isShow && content) {
     const tipContent = formatText(content)
@@ -10121,9 +10123,12 @@ const tableMethods: any = {
    * 行拖拽
    */
   handleRowDragDragstartEvent (evnt: DragEvent) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
     if (evnt.dataTransfer) {
       evnt.dataTransfer.setDragImage(getTpImg(), 0, 0)
     }
+    $xeTable.closeTooltip()
   },
   handleRowDragSwapEvent (evnt: DragEvent | null, isSyncRow: boolean | undefined, dragRow: any, prevDragRow: any, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -10837,9 +10842,12 @@ const tableMethods: any = {
    * 列拖拽
    */
   handleHeaderCellDragDragstartEvent (evnt: DragEvent) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
     if (evnt.dataTransfer) {
       evnt.dataTransfer.setDragImage(getTpImg(), 0, 0)
     }
+    $xeTable.closeTooltip()
   },
   handleColDragSwapColumn () {
     const $xeTable = this
@@ -10851,10 +10859,10 @@ const tableMethods: any = {
     })
   },
   handleColDragSwapEvent (evnt: DragEvent | null, isSyncColumn: boolean | undefined, dragCol: VxeTableDefines.ColumnInfo | null | undefined, prevDragCol: VxeTableDefines.ColumnInfo | undefined, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined) {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const props = $xeTable
-    const reactData = $xeTable
-    const internalData = $xeTable
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
     const { mouseConfig } = props
     const columnDragOpts = $xeTable.computeColumnDragOpts

package/packages/table/src/table.ts

@@ -2245,12 +2245,12 @@ export default {
     const { isCrossTableDrag } = rowDragOpts
     const tbOns: {
       contextmenu: (...args: any[]) => void
-        keydown: (...args: any[]) => void
-        dragover?: (...args: any[]) => void
-      } = {
-        contextmenu: this.contextMenuEvent,
-        keydown: this.keydownEvent
-      }
+      keydown: (...args: any[]) => void
+      dragover?: (...args: any[]) => void
+    } = {
+      contextmenu: this.contextMenuEvent,
+      keydown: this.keydownEvent
+    }
     if (isCrossTableDrag && !tableData.length) {
       tbOns.dragover = $xeTable.handleCrossTableRowDragoverEmptyEvent
     }

package/styles/theme/base.scss

@@ -3,9 +3,10 @@
   --vxe-ui-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
   
   /*font size*/
+  --vxe-ui-font-size-large: 16px;
   --vxe-ui-font-size-default: 14px;
   --vxe-ui-font-size-medium: 14px;
-  --vxe-ui-font-size-small: 13px;
+  --vxe-ui-font-size-small: 12px;
   --vxe-ui-font-size-mini: 12px;
 
   /*base border*/