vxe-table 4.16.1 → 4.16.3

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

@@ -148,6 +148,9 @@ hooks.add('tableMenuModule', {
        * 快捷菜单事件处理
        */
       handleGlobalContextmenuEvent (evnt) {
+        const $xeGrid = $xeTable.xeGrid
+        const $xeGantt = $xeTable.xeGantt
+
         const { mouseConfig, menuConfig } = props
         const { editStore, ctxMenuStore } = reactData
         const { visibleColumn } = internalData
@@ -165,7 +168,7 @@ hooks.add('tableMenuModule', {
           }
           if (internalData._keyCtx) {
             const type = 'body'
-            const params: any = { type, $table: $xeTable, keyboard: true, columns: 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 = $xeTable.getActiveCellArea()
@@ -192,7 +195,7 @@ hooks.add('tableMenuModule', {
               // target=td|th，直接向上找 table 去匹配即可
               return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID
             })
-            const params: any = { type: layout, $table: $xeTable, columns: 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)

package/packages/table/src/body.ts

@@ -194,14 +194,13 @@ export default defineVxeComponent({
       // hover 进入事件
       if (showTitle || showTooltip || showAllTip || tooltipConfig) {
         tdOns.onMouseenter = (evnt: MouseEvent) => {
-          if (isVMScrollProcess()) {
-            return
-          }
-          if (showTitle) {
-            updateCellTitle(evnt.currentTarget, column)
-          } else if (showTooltip || showAllTip) {
-            // 如果配置了显示 tooltip
-            $xeTable.triggerBodyTooltipEvent(evnt, cellParams)
+          if (!isVMScrollProcess()) {
+            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)
         }
@@ -209,11 +208,10 @@ export default defineVxeComponent({
       // hover 退出事件
       if (showTooltip || showAllTip || tooltipConfig) {
         tdOns.onMouseleave = (evnt: MouseEvent) => {
-          if (isVMScrollProcess()) {
-            return
-          }
-          if (showTooltip || showAllTip) {
-            $xeTable.handleTargetLeaveEvent(evnt)
+          if (!isVMScrollProcess()) {
+            if (showTooltip || showAllTip) {
+              $xeTable.handleTargetLeaveEvent(evnt)
+            }
           }
           $xeTable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
         }

package/packages/table/src/column.ts

@@ -56,6 +56,8 @@ export const columnProps = {
   footerClassName: [String, Function] as PropType<VxeColumnPropTypes.FooterClassName>,
   // 格式化显示内容
   formatter: [Function, Array, String] as PropType<VxeColumnPropTypes.Formatter<any>>,
+  // 格式化表头显示内容
+  headerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.HeaderFormatter>,
   // 格式化表尾显示内容
   footerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.FooterFormatter>,
   // 是否显示间距

package/packages/table/src/columnInfo.ts

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

package/packages/table/src/emits.ts

@@ -9,6 +9,10 @@ export const tableEmits: VxeTableEmits = [
   'copy',
   'cut',
 
+  'columns-change',
+  'data-change',
+  'footer-data-change',
+
   'current-change', // 已废弃
 
   'current-row-change',

package/packages/table/src/header.ts

@@ -2,7 +2,7 @@ import { h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { getCalcHeight, convertHeaderColumnToRows } from './util'
+import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines, VxeColumnPropTypes } from '../../../types'
 
@@ -28,7 +28,7 @@ export default defineVxeComponent({
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
     const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts } = $xeTable.getComputeMaps()
 
-    const headerColumn = ref([] as VxeTableDefines.ColumnInfo[][])
+    const headerColumn = ref<VxeTableDefines.ColumnInfo[][]>([])
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refHeaderScroll = ref() as Ref<HTMLDivElement>
@@ -39,18 +39,28 @@ export default defineVxeComponent({
     const refHeaderBorderRepair = ref() as Ref<HTMLDivElement>
 
     const uploadColumn = () => {
+      const { showCustomHeader } = tableProps
+      const { collectColumn, visibleColumn } = tableInternalData
+      const { tableGroupColumn } = props
       const { isGroup } = tableReactData
-      headerColumn.value = isGroup ? convertHeaderColumnToRows(props.tableGroupColumn) : []
+      let spanColumns: VxeTableDefines.ColumnInfo[][] = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : []
+      let visibleColgroups: VxeTableDefines.ColumnInfo[][] = []
+      if (showCustomHeader && spanColumns.length > 1) {
+        visibleColgroups = convertHeaderToGridRows(spanColumns)
+        spanColumns = visibleColgroups
+      }
+      headerColumn.value = spanColumns
+      $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null)
     }
 
-    const renderRows = (isGroup: boolean, isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
+    const renderRows = (isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][], $rowIndex: number, cols: VxeTableDefines.ColumnInfo[]) => {
       const $xeGrid = $xeTable.xeGrid
       const $xeGantt = $xeTable.xeGantt
 
       const { fixedType } = props
-      const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
-      const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, tableColumn } = tableReactData
-      const { fullColumnIdData, scrollXStore } = tableInternalData
+      const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
+      const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn } = tableReactData
+      const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps } = tableInternalData
       const virtualXOpts = computeVirtualXOpts.value
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
@@ -59,6 +69,7 @@ export default defineVxeComponent({
       const headerCellOpts = computeHeaderCellOpts.value
       const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight
       const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
+      const isLastRow = $rowIndex === headerGroups.length - 1
 
       return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column
@@ -101,10 +112,32 @@ export default defineVxeComponent({
           hasFilter
         }
         const thAttrs: Record<string, string | number | null> = {
-          colid,
-          colspan: column.colSpan > 1 ? column.colSpan : null,
-          rowspan: column.rowSpan > 1 ? column.rowSpan : null
+          colid
+        }
+        let isMergeCell = false
+        // 合并行或列
+        if (!showCustomHeader) {
+          thAttrs.colspan = column.colSpan > 1 ? column.colSpan : null
+          thAttrs.rowspan = column.rowSpan > 1 ? column.rowSpan : null
+        }
+        if (mergeHeadFlag && mergeHeaderList.length && (showCustomHeader || isLastRow)) {
+          const spanRest = mergeHeaderCellMaps[`${$rowIndex}:${showCustomHeader ? $columnIndex : _columnIndex}`]
+          if (spanRest) {
+            const { rowspan, colspan } = spanRest
+            if (!rowspan || !colspan) {
+              return null
+            }
+            if (rowspan > 1) {
+              isMergeCell = true
+              thAttrs.rowspan = rowspan
+            }
+            if (colspan > 1) {
+              isMergeCell = true
+              thAttrs.colspan = colspan
+            }
+          }
         }
+
         const thOns: any = {
           onClick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
           onDblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
@@ -132,7 +165,7 @@ export default defineVxeComponent({
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
         let isVNPreEmptyStatus = false
-        if (isOptimizeMode && overflowX && !isGroup) {
+        if (isOptimizeMode && overflowX && !isGroup && !isMergeCell) {
           if (!dragCol || dragCol.id !== colid) {
             if (scrollXLoad && tableColumn.length > 10 && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
               isVNPreEmptyStatus = true
@@ -148,7 +181,7 @@ export default defineVxeComponent({
         }
 
         return h('th', {
-          class: ['vxe-table--column vxe-header--column', colid, {
+          class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
             [`col--${headAlign}`]: headAlign,
             [`col--${type}`]: type,
             'col--last': isLastColumn,
@@ -156,7 +189,6 @@ export default defineVxeComponent({
             'col--group': isColGroup,
             'col--ellipsis': hasEllipsis,
             'fixed--width': !isAutoCellWidth,
-            'fixed--hidden': fixedHiddenColumn,
             'is--padding': isPadding,
             'is--sortable': column.sortable,
             'col--filter': !!filters,
@@ -171,7 +203,7 @@ export default defineVxeComponent({
           style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : null,
           ...thAttrs,
           ...thOns,
-          key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
+          key: showCustomHeader ? `${colid}${$columnIndex}` : (columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex)
         }, [
           h('div', {
             class: ['vxe-cell', {
@@ -191,7 +223,7 @@ export default defineVxeComponent({
           /**
            * 列宽拖动
            */
-          !fixedHiddenColumn && showResizable
+          !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow)
             ? h('div', {
               class: 'vxe-cell--col-resizable',
               onMousedown: (evnt: MouseEvent) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
@@ -216,7 +248,7 @@ export default defineVxeComponent({
             headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName) : ''
           ],
           style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-        }, renderRows(isGroup, isOptimizeMode, cols, $rowIndex))
+        }, renderRows(isGroup, isOptimizeMode, headerGroups, $rowIndex, cols))
       })
     }
 
@@ -227,7 +259,7 @@ export default defineVxeComponent({
       const { visibleColumn, fullColumnIdData } = tableInternalData
 
       const mouseOpts = computeMouseOpts.value
-      let renderHeaderList = headerColumn.value
+      let renderHeaderList = headerColumn.value || []
       let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
       let isOptimizeMode = false
 

package/packages/table/src/props.ts

@@ -15,7 +15,7 @@ export const tableProps = {
   // 表格的最小高度
   minHeight: {
     type: [Number, String] as PropType<VxeTablePropTypes.MinHeight>,
-    default: () => getConfig().table.minHeight
+    default: () => null
   },
   // 表格的最大高度
   maxHeight: [Number, String] as PropType<VxeTablePropTypes.MaxHeight>,
@@ -134,9 +134,17 @@ export const tableProps = {
   headerRowStyle: [Object, Function] as PropType<VxeTablePropTypes.HeaderRowStyle>,
   // 给表尾行附加样式
   footerRowStyle: [Object, Function] as PropType<VxeTablePropTypes.FooterRowStyle>,
-  // 合并指定单元格
+  // 用于分组表头，显示为自定义列头，配合 mergeHeaderCells 灵活实现自定义合并
+  showCustomHeader: {
+    type: Boolean as PropType<VxeTablePropTypes.ShowCustomHeader>,
+    default: () => getConfig().table.showCustomHeader
+  },
+  // 临时合并指定的表头单元格
+  mergeHeaderCells: Array as PropType<VxeTablePropTypes.MergeHeaderCells>,
+  // 临时合并指定的单元格
   mergeCells: Array as PropType<VxeTablePropTypes.MergeCells>,
-  // 合并指定的表尾
+  // 临时合并指定的表尾单元格
+  mergeFooterCells: Array as PropType<VxeTablePropTypes.MergeFooterCells>,
   mergeFooterItems: Array as PropType<VxeTablePropTypes.MergeFooterItems>,
   // 自定义合并行或列的方法
   spanMethod: Function as PropType<VxeTablePropTypes.SpanMethod>,