vxe-table 4.16.0 → 4.16.2

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

@@ -111,14 +111,18 @@ hooks.add('tableEditModule', {
     const handleInsertRowAt = (records: any, targetRow: any, isInsertNextRow?: boolean) => {
       const { treeConfig } = props
       const { isRowGroupStatus } = reactData
-      const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData
+      const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps, removeRowMaps } = internalData
       const treeOpts = computeTreeOpts.value
-      const { transform, rowField, mapChildrenField } = treeOpts
+      const { transform, parentField, rowField, mapChildrenField } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       if (!XEUtils.isArray(records)) {
         records = [records]
       }
       const newRecords: any[] = reactive($xeTable.defineField(records.map((record: any) => Object.assign(treeConfig && transform ? { [mapChildrenField]: [], [childrenField]: [] } : {}, record))))
+      let treeRecords: any[] = []
+      if (treeConfig && transform) {
+        treeRecords = XEUtils.toArrayTree(newRecords, { key: rowField, parentKey: parentField, children: childrenField })
+      }
       if (XEUtils.eqNull(targetRow)) {
         // 如果为虚拟树
         if (treeConfig && transform) {
@@ -178,26 +182,33 @@ hooks.add('tableEditModule', {
               const parentMapChilds = parentRow ? parentRow[mapChildrenField] : tableFullTreeData
               const parentRest = fullAllDataRowIdData[getRowid($xeTable, parentRow)]
               const parentLevel = parentRest ? parentRest.level : 0
-              newRecords.forEach((item, i) => {
-                const rowid = getRowid($xeTable, item)
-                if (item[treeOpts.parentField]) {
-                  if (parentRow && item[treeOpts.parentField] !== parentRow[rowField]) {
-                    errLog('vxe.error.errProp', [`${treeOpts.parentField}=${item[treeOpts.parentField]}`, `${treeOpts.parentField}=${parentRow[rowField]}`])
-                  }
-                }
+              treeRecords.forEach((row, i) => {
                 if (parentRow) {
-                  item[treeOpts.parentField] = parentRow[rowField]
+                  if (row[parentField] !== parentRow[rowField]) {
+                    row[parentField] = parentRow[rowField]
+                    errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, `${parentField}=${parentRow[rowField]}`])
+                  }
+                } else {
+                  if (row[parentField] !== null) {
+                    row[parentField] = null
+                    errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, 'null'])
+                  }
                 }
                 let targetIndex = matchMapObj.index + i
                 if (isInsertNextRow) {
                   targetIndex = targetIndex + 1
                 }
-                parentMapChilds.splice(targetIndex, 0, item)
+                parentMapChilds.splice(targetIndex, 0, row)
+              })
+              XEUtils.eachTree(treeRecords, (item) => {
+                const rowid = getRowid($xeTable, item)
                 const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+                if (item[childrenField]) {
+                  item[mapChildrenField] = item[childrenField]
+                }
                 fullDataRowIdData[rowid] = rest
                 fullAllDataRowIdData[rowid] = rest
-              })
-
+              }, { children: childrenField })
               // 源
               if (parentRow) {
                 const matchObj = XEUtils.findTree(tableFullTreeData, item => targetRow[rowField] === item[rowField], { children: childrenField })
@@ -207,7 +218,7 @@ hooks.add('tableEditModule', {
                   if (isInsertNextRow) {
                     targetIndex = targetIndex + 1
                   }
-                  parentChilds.splice(targetIndex, 0, ...newRecords)
+                  parentChilds.splice(targetIndex, 0, ...treeRecords)
                 }
               }
             } else {
@@ -259,10 +270,27 @@ hooks.add('tableEditModule', {
           }
         }
       }
-      newRecords.forEach(newRow => {
+
+      const handleStatus = (newRow: any) => {
         const rowid = getRowid($xeTable, newRow)
-        insertRowMaps[rowid] = newRow
-      })
+        // 如果是被删除的数据，则还原状态
+        if (removeRowMaps[rowid]) {
+          delete removeRowMaps[rowid]
+          if (insertRowMaps[rowid]) {
+            delete insertRowMaps[rowid]
+          }
+        } else {
+          insertRowMaps[rowid] = newRow
+        }
+      }
+      // 如果为虚拟树
+      if (treeConfig && transform) {
+        XEUtils.eachTree(treeRecords, handleStatus, { children: mapChildrenField })
+      } else {
+        newRecords.forEach(handleStatus)
+      }
+
+      reactData.removeRowFlag++
       reactData.insertRowFlag++
       $xeTable.cacheRowMap(false)
       $xeTable.updateScrollYStatus()
@@ -737,7 +765,12 @@ hooks.add('tableEditModule', {
         const { editStore } = reactData
         const { row, column } = editStore.actived
         if (column && row) {
-          return { row, column }
+          return {
+            row,
+            rowIndex: $xeTable.getRowIndex(row),
+            column,
+            columnIndex: $xeTable.getColumnIndex(column)
+          }
         }
         return null
       },
@@ -748,7 +781,10 @@ hooks.add('tableEditModule', {
         const { editStore } = reactData
         const { row, column } = editStore.selected
         if (row && column) {
-          return { row, column }
+          return {
+            row,
+            column
+          }
         }
         return null
       },

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',
@@ -58,6 +62,8 @@ export const tableEmits: VxeTableEmits = [
   'row-dragstart',
   'row-dragover',
   'row-dragend',
+  'row-remove-dragend',
+  'row-insert-dragend',
   'column-dragstart',
   'column-dragover',
   'column-dragend',

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>,

package/packages/table/src/store.ts

@@ -0,0 +1,14 @@
+import { reactive } from 'vue'
+
+interface CrossTableDragRowObj {
+  row: any
+}
+
+// 跨表拖拽
+export const crossTableDragRowInfo: CrossTableDragRowObj = reactive({
+  row: null
+})
+
+export function getCrossTableDragRowInfo () {
+  return crossTableDragRowInfo
+}