vxe-table 3.20.10 → 3.20.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.20.10",
+  "version": "3.20.12",
   "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

@@ -1,6 +1,7 @@
 import { PropType, CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
+import { defineVxeComponent } from '../../ui/src/comp'
 import { isEnableConf, getClass } from '../../ui/src/utils'
 import { getRowid, createHandleGetRowId, getCellRestHeight } from './util'
 import { updateCellTitle } from '../../ui/src/dom'
@@ -488,7 +489,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
 
   const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
   const { hasFixedColumn, treeExpandedFlag, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
-  const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
+  const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps, currentRow } = tableInternalData
   const checkboxOpts = $xeTable.computeCheckboxOpts
   const radioOpts = $xeTable.computeRadioOpts
   const treeOpts = $xeTable.computeTreeOpts
@@ -579,7 +580,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) : ''
     ]
@@ -709,7 +711,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   return rows
 }
 
-export default {
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTableBody',
   props: {
     tableData: Array as PropType<any[]>,
@@ -717,10 +719,10 @@ export default {
     fixedColumn: Array as PropType<VxeTableDefines.ColumnInfo[]>,
     fixedType: {
       type: String as PropType<'right' | 'left' | ''>,
-      default: ''
+      default: '' as 'right' | 'left' | ''
     }
   },
-  mounted (this: any) {
+  mounted () {
     const _vm = this
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
@@ -738,7 +740,7 @@ export default {
     elemStore[`${prefix}ySpace`] = _vm.$refs.refBodyYSpace
     elemStore[`${prefix}emptyBlock`] = _vm.$refs.refBodyEmptyBlock
   },
-  destroyed (this: any) {
+  destroyed () {
     const props = this
     const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
@@ -755,7 +757,7 @@ export default {
     elemStore[`${prefix}ySpace`] = null
     elemStore[`${prefix}emptyBlock`] = null
   },
-  render (this: any, h: CreateElement) {
+  render (h: CreateElement) {
     const props = this
     const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableProps = $xeTable
@@ -968,4 +970,4 @@ export default {
       ])
     ])
   }
-}
+}) /* define-vxe-component end */

package/packages/table/src/footer.ts

@@ -1,6 +1,7 @@
 import { PropType, CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
+import { defineVxeComponent } from '../../ui/src/comp'
 import { getClass } from '../../ui/src/utils'
 import { updateCellTitle } from '../../ui/src/dom'
 import { getCalcHeight } from './util'
@@ -222,7 +223,7 @@ function renderHeads (h: CreateElement, _vm: any, isOptimizeMode: boolean, rende
   })
 }
 
-export default {
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTableFooter',
   props: {
     footerTableData: {
@@ -243,7 +244,7 @@ export default {
     }
   },
   mounted () {
-    const _vm = this as any
+    const _vm = this
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
@@ -259,7 +260,7 @@ export default {
     elemStore[`${prefix}xSpace`] = _vm.$refs.refFooterXSpace
   },
   destroyed () {
-    const _vm = this as any
+    const _vm = this
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
@@ -385,4 +386,4 @@ export default {
       ])
     ])
   }
-}
+}) /* define-vxe-component end */

package/packages/table/src/header.ts

@@ -1,6 +1,7 @@
 import { PropType, CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
+import { defineVxeComponent } from '../../ui/src/comp'
 import { isEnableConf, getClass } from '../../ui/src/utils'
 import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -362,7 +363,7 @@ function renderHeads (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMo
   return rowVNs
 }
 
-export default {
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTableHeader',
   props: {
     tableData: Array as PropType<any[]>,
@@ -375,8 +376,10 @@ export default {
     }
   },
   data () {
+    const headerColumn: VxeTableDefines.ColumnInfo[][] = []
+
     return {
-      headerColumn: []
+      headerColumn
     }
   },
   watch: {
@@ -391,7 +394,7 @@ export default {
     _vm.uploadColumn()
   },
   mounted () {
-    const _vm = this as any
+    const _vm = this
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const internalData = $xeTable as unknown as TableInternalData
@@ -408,7 +411,7 @@ export default {
     elemStore[`${prefix}repair`] = _vm.$refs.refHeaderBorderRepair
   },
   destroyed () {
-    const _vm = this as any
+    const _vm = this
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const internalData = $xeTable as unknown as TableInternalData
@@ -425,7 +428,7 @@ export default {
     elemStore[`${prefix}repair`] = null
   },
   render (h: CreateElement) {
-    const _vm = this as any
+    const _vm = this
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableProps = $xeTable
@@ -434,7 +437,7 @@ export default {
 
     const { xID } = $xeTable
     const { fixedType, fixedColumn, tableColumn } = props
-    const { headerColumn } = _vm
+    const { headerColumn } = _vm as any
 
     const { mouseConfig } = tableProps
     const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData
@@ -577,7 +580,7 @@ export default {
   },
   methods: {
     uploadColumn () {
-      const _vm = this as any
+      const _vm = this
       const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
       const tableProps = $xeTable
       const tableReactData = $xeTable as unknown as TableReactData
@@ -595,8 +598,10 @@ export default {
         visibleColgroups = convertHeaderToGridRows(spanColumns)
         spanColumns = visibleColgroups
       }
-      _vm.headerColumn = spanColumns
-      $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null)
+      (_vm as any).headerColumn = spanColumns
+      $xeTable.$nextTick(() => {
+        $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null)
+      })
     }
   }
-}
+}) /* define-vxe-component end */