vxe-table 3.18.1 → 3.18.3

package/lib/index.umd.js

@@ -2002,7 +2002,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.18.1";
+const version = "3.18.3";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2678,7 +2678,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.18.1"}`;
+const log_version = `table v${"3.18.3"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -2781,6 +2781,7 @@ class ColumnInfo {
       headerClassName: _vm.headerClassName,
       footerClassName: _vm.footerClassName,
       formatter,
+      headerFormatter: _vm.headerFormatter,
       footerFormatter: _vm.footerFormatter,
       padding: _vm.padding,
       verticalAlign: _vm.verticalAlign,
@@ -2971,14 +2972,19 @@ function createInternalData() {
     sourceDataRowIdData: {},
     fullColumnIdData: {},
     fullColumnFieldData: {},
+    // 合并表头单元格的数据
+    mergeHeaderList: [],
+    mergeHeaderMaps: {},
+    // 已合并单元格数据集合
+    mergeHeaderCellMaps: {},
     // 合并单元格的数据
     mergeBodyList: [],
     mergeBodyMaps: {},
+    // 已合并单元格数据集合
+    mergeBodyCellMaps: {},
     // 合并表尾的数据
     mergeFooterList: [],
     mergeFooterMaps: {},
-    // 已合并单元格数据集合
-    mergeBodyCellMaps: {},
     // 已合并表尾数据集合
     mergeFooterCellMaps: {},
     // 已展开的行集合
@@ -3069,6 +3075,72 @@ const convertHeaderColumnToRows = originColumns => {
   });
   return rows;
 };
+function convertHeaderToGridRows(spanColumns) {
+  const rSize = spanColumns.length;
+  const cSize = spanColumns[0].reduce((sum, cell) => sum + cell.colSpan, 0);
+  const occupiedRows = [];
+  const fullRows = [];
+  for (let rIndex = 0; rIndex < rSize; rIndex++) {
+    const oCols = [];
+    const dCols = [];
+    for (let cIndex = 0; cIndex < cSize; cIndex++) {
+      oCols.push(false);
+      dCols.push('');
+    }
+    occupiedRows.push(oCols);
+    fullRows.push(dCols);
+  }
+  for (let rIndex = 0; rIndex < rSize; rIndex++) {
+    let currColIndex = 0;
+    for (const column of spanColumns[rIndex]) {
+      const {
+        colSpan,
+        rowSpan
+      } = column;
+      let startColIndex = -1;
+      for (let ccIndex = currColIndex; ccIndex <= cSize - colSpan; ccIndex++) {
+        let oFlag = true;
+        for (let csIndex = 0; csIndex < colSpan; csIndex++) {
+          if (occupiedRows[rIndex][ccIndex + csIndex]) {
+            oFlag = false;
+            break;
+          }
+        }
+        if (oFlag) {
+          startColIndex = ccIndex;
+          break;
+        }
+      }
+      if (startColIndex === -1) {
+        for (let j = 0; j <= cSize - colSpan; j++) {
+          let oFlag = true;
+          for (let k = 0; k < colSpan; k++) {
+            if (occupiedRows[rIndex][j + k]) {
+              oFlag = false;
+              break;
+            }
+          }
+          if (oFlag) {
+            startColIndex = j;
+            break;
+          }
+        }
+        if (startColIndex === -1) {
+          // error
+          break;
+        }
+      }
+      for (let srIndex = rIndex; srIndex < rIndex + rowSpan; srIndex++) {
+        for (let scIndex = startColIndex; scIndex < startColIndex + colSpan; scIndex++) {
+          occupiedRows[srIndex][scIndex] = true;
+          fullRows[srIndex][scIndex] = column;
+        }
+      }
+      currColIndex = startColIndex + colSpan;
+    }
+  }
+  return fullRows;
+}
 function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
   const internalData = $xeTable;
   if (scrollLeft || scrollTop) {
@@ -3615,25 +3687,31 @@ function colToVisible($xeTable, column, row) {
 function getOnName(type) {
   return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().kebabCase(type);
 }
-function getModelEvent(renderOpts) {
-  switch (renderOpts.name) {
-    case 'input':
-    case 'textarea':
-      return 'input';
+function getModelEvent(name) {
+  switch (name) {
+    case 'VxeInput':
+    case 'VxeTextarea':
+    case 'VxeNumberInput':
+    case 'VxeSelect':
+    case 'VxeTreeSelect':
+    case 'VxeTableSelect':
+    case 'VxeDatePicker':
+    case 'VxeDateRangePicker':
+      return 'modelValue';
     case 'select':
       return 'change';
   }
-  return 'modelValue';
+  return 'input';
 }
-function getChangeEvent(renderOpts) {
-  switch (renderOpts.name) {
+function getChangeEvent(name) {
+  switch (name) {
     case 'input':
     case 'textarea':
     case 'VxeInput':
-    case 'VxeNumberInput':
     case 'VxeTextarea':
-    case '$input':
+    case '$input': // 已废弃
     case '$textarea':
+      // 已废弃
       return 'input';
   }
   return 'change';
@@ -5163,6 +5241,8 @@ const columnProps = {
   footerClassName: [String, Function],
   // 格式化显示内容
   formatter: [Function, Array, String],
+  // 格式化表头显示内容
+  headerFormatter: [Function, Array, String],
   // 格式化表尾显示内容
   footerFormatter: [Function, Array, String],
   // 是否显示间距
@@ -5392,7 +5472,7 @@ const tableProps = {
   // 表格的最小高度
   minHeight: {
     type: [Number, String],
-    default: () => props_getConfig().table.minHeight
+    default: () => null
   },
   // 表格的最大高度
   maxHeight: [Number, String],
@@ -5511,9 +5591,17 @@ const tableProps = {
   headerRowStyle: [Object, Function],
   // 给表尾行附加样式
   footerRowStyle: [Object, Function],
-  // 合并指定单元格
+  // 用于分组表头，显示为自定义列头，配合 mergeHeaderCells 灵活实现自定义合并
+  showCustomHeader: {
+    type: Boolean,
+    default: () => props_getConfig().table.showCustomHeader
+  },
+  // 临时合并指定的表头单元格
+  mergeHeaderCells: Array,
+  // 临时合并指定的单元格
   mergeCells: Array,
-  // 合并指定的表尾
+  // 临时合并指定的表尾单元格
+  mergeFooterCells: Array,
   mergeFooterItems: Array,
   // 自定义合并行或列的方法
   spanMethod: Function,
@@ -7070,7 +7158,7 @@ function updateStyle($xeTable) {
   }
   if (xRightCornerEl) {
     xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
-    xRightCornerEl.style.display = scrollbarXToTop ? '' : overflowX && osbHeight ? 'block' : '';
+    xRightCornerEl.style.display = scrollbarXToTop ? '' : xScrollbarVisible === 'visible' ? 'block' : '';
   }
   const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
   if (scrollYVirtualEl) {
@@ -7081,7 +7169,7 @@ function updateStyle($xeTable) {
   const yTopCornerEl = $xeTable.$refs.refScrollYTopCornerElem;
   if (yTopCornerEl) {
     yTopCornerEl.style.height = `${tHeaderHeight}px`;
-    yTopCornerEl.style.display = overflowY && tHeaderHeight ? 'block' : '';
+    yTopCornerEl.style.display = tHeaderHeight && yScrollbarVisible === 'visible' ? 'block' : '';
   }
   const yWrapperEl = $xeTable.$refs.refScrollYWrapperElem;
   if (yWrapperEl) {
@@ -7092,7 +7180,7 @@ function updateStyle($xeTable) {
   if (yBottomCornerEl) {
     yBottomCornerEl.style.height = `${tFooterHeight}px`;
     yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
-    yBottomCornerEl.style.display = overflowY && tFooterHeight ? 'block' : '';
+    yBottomCornerEl.style.display = tFooterHeight && yScrollbarVisible === 'visible' ? 'block' : '';
   }
   const rowExpandEl = $xeTable.$refs.refRowExpandElem;
   if (rowExpandEl) {
@@ -8120,15 +8208,71 @@ function handleBodyMerge($xeTable, merges) {
     });
   }
 }
-function handleFooterMerge($xeTable, merges) {
+function removeBodyMerges($xeTable, merges) {
+  const internalData = $xeTable;
+  const {
+    mergeBodyList,
+    fullColumnIdData,
+    fullAllDataRowIdData,
+    mergeBodyMaps
+  } = internalData;
+  const rest = [];
+  if (merges) {
+    const {
+      handleGetRowId
+    } = createHandleGetRowId($xeTable);
+    if (!external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(merges)) {
+      merges = [merges];
+    }
+    merges.forEach(item => {
+      const {
+        row: margeRow,
+        col: margeCol
+      } = item;
+      let mergeRowIndex = -1;
+      let mergeColumnIndex = -1;
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(margeRow)) {
+        mergeRowIndex = margeRow;
+      } else {
+        const rowid = margeRow ? handleGetRowId(margeRow) : null;
+        const rowRest = rowid ? fullAllDataRowIdData[rowid] : null;
+        if (rowRest) {
+          mergeRowIndex = rowRest._index;
+        }
+      }
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(margeCol)) {
+        mergeColumnIndex = margeCol;
+      } else {
+        const colid = margeCol ? margeCol.id : null;
+        const colRest = colid ? fullColumnIdData[colid] : null;
+        if (colRest) {
+          mergeColumnIndex = colRest._index;
+        }
+      }
+      const mcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(mergeBodyList, item => item.row === mergeRowIndex && item.col === mergeColumnIndex);
+      if (mcIndex > -1) {
+        const rItems = mergeBodyList.splice(mcIndex, 1);
+        const item = rItems[0];
+        if (item) {
+          rest.push(rItems[0]);
+          if (mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
+            delete mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+          }
+        }
+      }
+    });
+  }
+  return rest;
+}
+function handleHeaderMerge($xeTable, merges) {
   const reactData = $xeTable;
   const internalData = $xeTable;
   const {
     footerTableData
   } = reactData;
   const {
-    mergeFooterList,
-    mergeFooterMaps,
+    mergeHeaderList,
+    mergeHeaderMaps,
     fullColumnIdData
   } = internalData;
   if (merges) {
@@ -8162,7 +8306,7 @@ function handleFooterMerge($xeTable, merges) {
         if (rowspan > 1 || colspan > 1) {
           const row = footerTableData[mergeRowIndex];
           const column = visibleColumn[mergeColumnIndex];
-          let mergeItem = mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+          let mergeItem = mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
           if (mergeItem) {
             mergeItem.rowspan = rowspan;
             mergeItem.colspan = colspan;
@@ -8179,27 +8323,23 @@ function handleFooterMerge($xeTable, merges) {
               _rowspan: rowspan,
               _colspan: colspan
             };
-            mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
-            mergeFooterList.push(mergeItem);
+            mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
+            mergeHeaderList.push(mergeItem);
           }
         }
       }
     });
   }
 }
-function removeBodyMerges($xeTable, merges) {
+function removeHeaderMerges($xeTable, merges) {
   const internalData = $xeTable;
   const {
-    mergeBodyList,
+    mergeHeaderList,
     fullColumnIdData,
-    fullAllDataRowIdData,
-    mergeBodyMaps
+    mergeHeaderMaps
   } = internalData;
   const rest = [];
   if (merges) {
-    const {
-      handleGetRowId
-    } = createHandleGetRowId($xeTable);
     if (!external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(merges)) {
       merges = [merges];
     }
@@ -8208,17 +8348,8 @@ function removeBodyMerges($xeTable, merges) {
         row: margeRow,
         col: margeCol
       } = item;
-      let mergeRowIndex = -1;
+      const mergeRowIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(margeRow) ? margeRow : -1;
       let mergeColumnIndex = -1;
-      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(margeRow)) {
-        mergeRowIndex = margeRow;
-      } else {
-        const rowid = margeRow ? handleGetRowId(margeRow) : null;
-        const rowRest = rowid ? fullAllDataRowIdData[rowid] : null;
-        if (rowRest) {
-          mergeRowIndex = rowRest._index;
-        }
-      }
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(margeCol)) {
         mergeColumnIndex = margeCol;
       } else {
@@ -8228,14 +8359,14 @@ function removeBodyMerges($xeTable, merges) {
           mergeColumnIndex = colRest._index;
         }
       }
-      const mcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(mergeBodyList, item => item.row === mergeRowIndex && item.col === mergeColumnIndex);
+      const mcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(mergeHeaderList, item => item.row === mergeRowIndex && item.col === mergeColumnIndex);
       if (mcIndex > -1) {
-        const rItems = mergeBodyList.splice(mcIndex, 1);
+        const rItems = mergeHeaderList.splice(mcIndex, 1);
         const item = rItems[0];
         if (item) {
-          rest.push(rItems[0]);
-          if (mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
-            delete mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+          rest.push(item);
+          if (mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
+            delete mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
           }
         }
       }
@@ -8243,6 +8374,73 @@ function removeBodyMerges($xeTable, merges) {
   }
   return rest;
 }
+function handleFooterMerge($xeTable, merges) {
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    footerTableData
+  } = reactData;
+  const {
+    mergeFooterList,
+    mergeFooterMaps,
+    fullColumnIdData
+  } = internalData;
+  if (merges) {
+    const {
+      visibleColumn
+    } = internalData;
+    if (!external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(merges)) {
+      merges = [merges];
+    }
+    merges.forEach(item => {
+      let {
+        row: margeRow,
+        col: margeCol,
+        rowspan,
+        colspan
+      } = item;
+      const mergeRowIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(margeRow) ? margeRow : -1;
+      let mergeColumnIndex = -1;
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(margeCol)) {
+        mergeColumnIndex = margeCol;
+      } else {
+        const colid = margeCol ? margeCol.id : null;
+        const colRest = colid ? fullColumnIdData[colid] : null;
+        if (colRest) {
+          mergeColumnIndex = colRest._index;
+        }
+      }
+      if (mergeRowIndex > -1 && mergeColumnIndex > -1 && (rowspan || colspan)) {
+        rowspan = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(rowspan) || 1;
+        colspan = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(colspan) || 1;
+        if (rowspan > 1 || colspan > 1) {
+          const row = footerTableData[mergeRowIndex];
+          const column = visibleColumn[mergeColumnIndex];
+          let mergeItem = mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+          if (mergeItem) {
+            mergeItem.rowspan = rowspan;
+            mergeItem.colspan = colspan;
+            mergeItem._rowspan = rowspan;
+            mergeItem._colspan = colspan;
+          } else {
+            mergeItem = {
+              row: mergeRowIndex,
+              col: mergeColumnIndex,
+              rowspan,
+              colspan,
+              _row: row,
+              _col: column,
+              _rowspan: rowspan,
+              _colspan: colspan
+            };
+            mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
+            mergeFooterList.push(mergeItem);
+          }
+        }
+      }
+    });
+  }
+}
 function removeFooterMerges($xeTable, merges) {
   const internalData = $xeTable;
   const {
@@ -8370,10 +8568,26 @@ function clearAllSort($xeTable) {
 function calcTableHeight($xeTable, key) {
   const props = $xeTable;
   const reactData = $xeTable;
+  const {
+    editConfig
+  } = props;
   const {
     parentHeight
   } = reactData;
-  const val = props[key];
+  let val = props[key];
+  if (key === 'minHeight') {
+    const defMinHeight = methods_getConfig().table.minHeight;
+    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(val)) {
+      if (eqEmptyValue(defMinHeight)) {
+        // 编辑模式默认最小高度
+        if (isEnableConf(editConfig)) {
+          val = 144;
+        }
+      } else {
+        val = defMinHeight;
+      }
+    }
+  }
   let num = 0;
   if (val) {
     if (val === '100%' || val === 'auto') {
@@ -8922,13 +9136,24 @@ function handleDefaultMergeCells($xeTable) {
     $xeTable.setMergeCells(mergeCells);
   }
 }
+function handleDefaultMergeHeaderItems($xeTable) {
+  const props = $xeTable;
+  const {
+    mergeHeaderCells
+  } = props;
+  if (mergeHeaderCells) {
+    $xeTable.setMergeHeaderCells(mergeHeaderCells);
+  }
+}
 function handleDefaultMergeFooterItems($xeTable) {
   const props = $xeTable;
   const {
+    mergeFooterCells,
     mergeFooterItems
   } = props;
-  if (mergeFooterItems) {
-    $xeTable.setMergeFooterItems(mergeFooterItems);
+  const mFooterCells = mergeFooterCells || mergeFooterItems;
+  if (mFooterCells) {
+    $xeTable.setMergeFooterCells(mFooterCells);
   }
 }
 // 计算可视渲染相关数据
@@ -9434,6 +9659,10 @@ function loadTableData($xeTable, datas, isReset) {
     }
     handleReserveStatus($xeTable);
     $xeTable.checkSelectionStatus();
+    $xeTable.dispatchEvent('data-change', {
+      visibleColumn: internalData.visibleColumn,
+      visibleData: internalData.afterFullData
+    }, null);
     return new Promise(resolve => {
       $xeTable.$nextTick().then(() => handleRecalculateStyle($xeTable, false, false, false)).then(() => {
         handleRecalculateStyle($xeTable, false, true, true);
@@ -9490,6 +9719,7 @@ function handleLoadDefaults($xeTable) {
   handleDefaultTreeExpand($xeTable);
   handleDefaultRowGroupExpand($xeTable);
   handleDefaultMergeCells($xeTable);
+  handleDefaultMergeHeaderItems($xeTable);
   handleDefaultMergeFooterItems($xeTable);
   $xeTable.$nextTick(() => setTimeout(() => $xeTable.recalculate()));
 }
@@ -13523,6 +13753,16 @@ const Methods = {
     internalData.mergeBodyCellMaps = buildMergeData(mergeBodyList);
     reactData.mergeBodyFlag++;
   },
+  handleUpdateHeaderMerge() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      mergeHeaderList
+    } = internalData;
+    internalData.mergeHeaderCellMaps = buildMergeData(mergeHeaderList);
+    reactData.mergeHeadFlag++;
+  },
   handleUpdateFooterMerge() {
     const $xeTable = this;
     const reactData = $xeTable;
@@ -18754,6 +18994,10 @@ const Methods = {
     }
     reactData.footerTableData = footData;
     $xeTable.handleUpdateFooterMerge();
+    $xeTable.dispatchEvent('footer-data-change', {
+      visibleColumn: internalData.visibleColumn,
+      footData
+    }, null);
     return $xeTable.$nextTick();
   },
   /**
@@ -18840,45 +19084,101 @@ const Methods = {
       return updateStyle($xeTable);
     });
   },
-  setMergeFooterItems(merges) {
+  setMergeHeaderCells(merges) {
+    const $xeTable = this;
+    handleHeaderMerge($xeTable, merges);
+    $xeTable.handleUpdateHeaderMerge();
+    return $xeTable.$nextTick().then(() => {
+      return updateStyle($xeTable);
+    });
+  },
+  /**
+   * 移除表头单元格合并 [{row:Row|number, col:ColumnInfo|number}]
+   */
+  removeMergeHeaderCells(merges) {
+    const $xeTable = this;
+    const rest = removeHeaderMerges($xeTable, merges);
+    $xeTable.handleUpdateHeaderMerge();
+    return $xeTable.$nextTick().then(() => {
+      updateStyle($xeTable);
+      return rest;
+    });
+  },
+  /**
+   * 获取所有被合并的表头单元格
+   */
+  getMergeHeaderCells() {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    return internalData.mergeHeaderList.slice(0);
+  },
+  /**
+   * 清除所有表头单元格合并
+   */
+  clearMergeHeaderCells() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    internalData.mergeHeaderList = [];
+    internalData.mergeHeaderMaps = {};
+    internalData.mergeHeaderCellMaps = {};
+    reactData.mergeHeadFlag++;
+    return $xeTable.$nextTick().then(() => {
+      return updateStyle($xeTable);
+    });
+  },
+  setMergeFooterCells(merges) {
     const $xeTable = this;
     const props = $xeTable;
     if (props.footerSpanMethod) {
-      errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
+      errLog('vxe.error.errConflicts', ['merge-footer-cells | merge-footer-items', 'footer-span-method']);
     }
     handleFooterMerge($xeTable, merges);
     $xeTable.handleUpdateFooterMerge();
     return $xeTable.$nextTick().then(() => {
-      $xeTable.updateCellAreas();
       return updateStyle($xeTable);
     });
   },
-  removeMergeFooterItems(merges) {
+  setMergeFooterItems(merges) {
+    const $xeTable = this;
+    // errLog('vxe.error.delFunc', ['setMergeFooterItems', 'setMergeFooterCells'])
+    return $xeTable.setMergeFooterCells(merges);
+  },
+  removeMergeFooterCells(merges) {
     const $xeTable = this;
     const props = $xeTable;
     if (props.footerSpanMethod) {
-      errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
+      errLog('vxe.error.errConflicts', ['merge-footer-cells | merge-footer-items', 'footer-span-method']);
     }
     const rest = removeFooterMerges($xeTable, merges);
     $xeTable.handleUpdateFooterMerge();
     return $xeTable.$nextTick().then(() => {
-      $xeTable.updateCellAreas();
       updateStyle($xeTable);
       return rest;
     });
   },
+  removeMergeFooterItems(merges) {
+    const $xeTable = this;
+    // errLog('vxe.error.delFunc', ['removeMergeFooterItems', 'removeMergeFooterCells'])
+    return $xeTable.removeMergeFooterCells(merges);
+  },
   /**
    * 获取所有被合并的表尾
    */
-  getMergeFooterItems() {
+  getMergeFooterCells() {
     const $xeTable = this;
     const internalData = $xeTable;
     return internalData.mergeFooterList.slice(0);
   },
+  getMergeFooterItems() {
+    const $xeTable = this;
+    // errLog('vxe.error.delFunc', ['getMergeFooterItems', 'getMergeFooterCells'])
+    return $xeTable.getMergeFooterCells();
+  },
   /**
    * 清除所有表尾合并
    */
-  clearMergeFooterItems() {
+  clearMergeFooterCells() {
     const $xeTable = this;
     const reactData = $xeTable;
     const internalData = $xeTable;
@@ -18890,6 +19190,11 @@ const Methods = {
       return updateStyle($xeTable);
     });
   },
+  clearMergeFooterItems() {
+    const $xeTable = this;
+    // errLog('vxe.error.delFunc', ['clearMergeFooterItems', 'clearMergeFooterCells'])
+    return $xeTable.clearMergeFooterCells();
+  },
   handleUpdateAggData() {
     const $xeTable = this;
     const internalData = $xeTable;
@@ -19258,14 +19563,13 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
   // hover 进入事件
   if (showTitle || showTooltip || showAllTip || tooltipConfig) {
     tdOns.mouseenter = evnt => {
-      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
@@ -19275,11 +19579,10 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
   // hover 退出事件
   if (showTooltip || showAllTip || tooltipConfig) {
     tdOns.mouseleave = evnt => {
-      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
@@ -20027,7 +20330,7 @@ const {
   renderEmptyElement: header_renderEmptyElement
 } = core_.VxeUI;
 const cellType = 'header';
-const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
+function header_renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, cols) {
   const props = _vm;
   const $xeTable = _vm.$parent;
   const $xeGrid = $xeTable.$xeGrid;
@@ -20041,6 +20344,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
   const {
     resizable: allResizable,
     columnKey,
+    showCustomHeader,
     headerCellClassName,
     headerCellStyle,
     showHeaderOverflow: allColumnHeaderOverflow,
@@ -20054,11 +20358,14 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
     scrollXLoad,
     scrollYLoad,
     overflowX,
+    mergeHeadFlag,
     tableColumn
   } = tableReactData;
   const {
     fullColumnIdData,
-    scrollXStore
+    scrollXStore,
+    mergeHeaderList,
+    mergeHeaderCellMaps
   } = tableInternalData;
   const virtualXOpts = $xeTable.computeVirtualXOpts;
   const columnOpts = $xeTable.computeColumnOpts;
@@ -20072,6 +20379,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
     isCrossDrag,
     isPeerDrag
   } = columnDragOpts;
+  const isLastRow = $rowIndex === headerGroups.length - 1;
   return cols.map((column, $columnIndex) => {
     const {
       type,
@@ -20104,7 +20412,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
       hasFilter = filters.some(item => item.checked);
     }
     const columnIndex = colRest.index;
-    const _columnIndex = colRest._index;
+    const _columnIndex = showCustomHeader ? $columnIndex : colRest._index;
     const cellParams = {
       $table: $xeTable,
       $grid: $xeGrid,
@@ -20121,10 +20429,34 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
       hasFilter
     };
     const thAttrs = {
-      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 = {
       click: evnt => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
       dblclick: evnt => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
@@ -20151,7 +20483,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
     const showResizable = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable;
     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;
@@ -20165,7 +20497,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
       tcStyle.minHeight = `${currCellHeight}px`;
     }
     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,
@@ -20173,7 +20505,6 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
         'col--group': isColGroup,
         'col--ellipsis': hasEllipsis,
         'fixed--width': !isAutoCellWidth,
-        'fixed--hidden': fixedHiddenColumn,
         'is--padding': isPadding,
         'is--sortable': column.sortable,
         'col--filter': !!filters,
@@ -20185,7 +20516,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
       attrs: thAttrs,
       style: headerCellStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle : undefined,
       on: 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', {
         'c--title': showTitle,
@@ -20200,9 +20531,9 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
       class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
     }, column.renderHeader(h, cellParams))]),
     /**
-    * 列宽拖动
-    */
-    !fixedHiddenColumn && showResizable ? h('div', {
+     * 列宽拖动
+     */
+    !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow) ? h('div', {
       class: 'vxe-cell--col-resizable',
       on: {
         mousedown: evnt => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
@@ -20210,7 +20541,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
       }
     }) : header_renderEmptyElement($xeTable)]);
   });
-};
+}
 function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
   const props = _vm;
   const $xeTable = _vm.$parent;
@@ -20233,7 +20564,7 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
       key: $rowIndex,
       class: ['vxe-header--row', headerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''],
       style: headerRowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle : undefined
-    }, header_renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex));
+    }, header_renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, cols));
   });
 }
 /* harmony default export */ var header = ({
@@ -20255,11 +20586,13 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
   },
   watch: {
     tableColumn() {
-      this.uploadColumn();
+      const _vm = this;
+      _vm.uploadColumn();
     }
   },
   created() {
-    this.uploadColumn();
+    const _vm = this;
+    _vm.uploadColumn();
   },
   mounted() {
     const _vm = this;
@@ -20282,8 +20615,9 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
     elemStore[`${prefix}repair`] = _vm.$refs.refHeaderBorderRepair;
   },
   destroyed() {
-    const props = this;
-    const $xeTable = this.$parent;
+    const _vm = this;
+    const props = _vm;
+    const $xeTable = _vm.$parent;
     const internalData = $xeTable;
     const {
       fixedType
@@ -20301,8 +20635,9 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
     elemStore[`${prefix}repair`] = null;
   },
   render(h) {
-    const props = this;
-    const $xeTable = this.$parent;
+    const _vm = this;
+    const props = _vm;
+    const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
@@ -20316,7 +20651,7 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
     } = props;
     const {
       headerColumn
-    } = this;
+    } = _vm;
     const {
       mouseConfig,
       showHeaderOverflow: allColumnHeaderOverflow,
@@ -20435,7 +20770,7 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
      */
     h('thead', {
       ref: 'refHeaderTHead'
-    }, renderHeads(h, this, isGroup, isOptimizeMode, renderHeaderList))]), mouseConfig && mouseOpts.area ? h('div', {
+    }, renderHeads(h, _vm, isGroup, isOptimizeMode, renderHeaderList))]), mouseConfig && mouseOpts.area ? h('div', {
       class: 'vxe-table--cell-area'
     }, [h('span', {
       class: 'vxe-table--cell-main-area'
@@ -20453,12 +20788,37 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
   },
   methods: {
     uploadColumn() {
-      const $xeTable = this.$parent;
+      const _vm = this;
+      const $xeTable = _vm.$parent;
+      const tableProps = $xeTable;
       const tableReactData = $xeTable;
+      const tableInternalData = $xeTable;
+      const props = _vm;
+      const {
+        showCustomHeader
+      } = tableProps;
+      const {
+        collectColumn,
+        visibleColumn
+      } = tableInternalData;
+      const {
+        tableGroupColumn
+      } = props;
       const {
         isGroup
       } = tableReactData;
-      this.headerColumn = isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
+      let spanColumns = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : [];
+      let visibleColgroups = [];
+      if (showCustomHeader && spanColumns.length > 1) {
+        visibleColgroups = convertHeaderToGridRows(spanColumns);
+        spanColumns = visibleColgroups;
+      }
+      _vm.headerColumn = spanColumns;
+      $xeTable.dispatchEvent('columns-change', {
+        visibleColgroups,
+        collectColumn,
+        visibleColumn
+      }, null);
     }
   }
 });
@@ -20756,8 +21116,9 @@ function footer_renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
     elemStore[`${prefix}xSpace`] = _vm.$refs.refFooterXSpace;
   },
   destroyed() {
-    const props = this;
-    const $xeTable = this.$parent;
+    const _vm = this;
+    const props = _vm;
+    const $xeTable = _vm.$parent;
     const tableInternalData = $xeTable;
     const {
       fixedType
@@ -20774,8 +21135,9 @@ function footer_renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
     elemStore[`${prefix}xSpace`] = null;
   },
   render(h) {
-    const props = this;
-    const $xeTable = this.$parent;
+    const _vm = this;
+    const props = _vm;
+    const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
@@ -20894,7 +21256,7 @@ function footer_renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
     */
     h('tfoot', {
       ref: 'refFooterTFoot'
-    }, footer_renderHeads(h, this, isOptimizeMode, renderColumnList))])])]);
+    }, footer_renderHeads(h, _vm, isOptimizeMode, renderColumnList))])])]);
   }
 });
 ;// CONCATENATED MODULE: ./packages/table/module/custom/panel.ts
@@ -23251,7 +23613,8 @@ const {
 
 
 const {
-  getIcon: menu_panel_getIcon
+  getIcon: menu_panel_getIcon,
+  renderEmptyElement: menu_panel_renderEmptyElement
 } = core_.VxeUI;
 /* harmony default export */ var menu_panel = ({
   name: 'VxeTableMenuPanel',
@@ -23272,18 +23635,18 @@ const {
   },
   render(h) {
     const $xeTable = this.$parent;
+    const tableReactData = $xeTable;
     const {
-      _e,
-      ctxMenuOpts,
       ctxMenuStore
-    } = this;
+    } = 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, gIndex) => {
-      return options.every(item => item.visible === false) ? _e() : h('ul', {
+      return options.every(item => item.visible === false) ? menu_panel_renderEmptyElement($xeTable) : h('ul', {
         class: 'vxe-context-menu--option-wrapper',
         key: gIndex
       }, options.map((item, index) => {
@@ -23314,7 +23677,7 @@ const {
           class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
         }, [h('i', {
           class: prefixOpts.icon || item.prefixIcon
-        }), prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : _e()]), h('span', {
+        }), prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : menu_panel_renderEmptyElement($xeTable)]), h('span', {
           class: 'vxe-context-menu--link-content',
           attrs: {
             title: menuContent
@@ -23323,7 +23686,7 @@ const {
           class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
         }, [h('i', {
           class: suffixOpts.icon || item.suffixIcon || (hasChildMenus ? menu_panel_getIcon().TABLE_MENU_OPTIONS : '')
-        }), suffixOpts.content ? h('span', `${suffixOpts.content}`) : _e()])]), hasChildMenus ? h('ul', {
+        }), suffixOpts.content ? h('span', `${suffixOpts.content}`) : menu_panel_renderEmptyElement($xeTable)])]), hasChildMenus ? h('ul', {
           class: ['vxe-table--context-menu-clild-wrapper', {
             'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
           }]
@@ -23354,7 +23717,7 @@ const {
             class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
           }, [h('i', {
             class: childPrefixOpts.icon || child.prefixIcon
-          }), childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : _e()]), h('span', {
+          }), childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : menu_panel_renderEmptyElement($xeTable)]), h('span', {
             class: 'vxe-context-menu--link-content',
             attrs: {
               title: childMenuContent
@@ -23363,7 +23726,7 @@ const {
             class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
           }, [h('i', {
             class: childSuffixOpts.icon
-          }), childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : _e()])])]);
+          }), childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : menu_panel_renderEmptyElement($xeTable)])])]);
         })) : null]);
       }));
     }));
@@ -23794,13 +24157,15 @@ const {
      * 关闭快捷菜单
      */
     _closeMenu() {
-      Object.assign(this.ctxMenuStore, {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      Object.assign(reactData.ctxMenuStore, {
         visible: false,
         selected: null,
         selectChild: null,
         showChild: false
       });
-      return this.$nextTick();
+      return $xeTable.$nextTick();
     },
     // 处理菜单的移动
     moveCtxMenu(evnt, ctxMenuStore, property, hasOper, operRest, menuList) {
@@ -23841,25 +24206,34 @@ const {
       const $xeTable = this;
       const $xeGrid = $xeTable.$xeGrid;
       const $xeGantt = $xeTable.$xeGantt;
+      const props = $xeTable;
+      const reactData = $xeTable;
       const internalData = $xeTable;
       const {
-        $refs,
-        tId,
-        editStore,
-        menuConfig,
-        contextMenu,
-        ctxMenuStore,
-        ctxMenuOpts,
+        xID
+      } = $xeTable;
+      const {
         mouseConfig,
-        mouseOpts
-      } = this;
+        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;
       const {
         selected
       } = editStore;
-      const tableFilter = $xeTable.$refs.refTableFilter;
       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.$el).flag) {
           evnt.preventDefault();
           return;
         }
@@ -23871,16 +24245,16 @@ const {
             $grid: $xeGrid,
             $gantt: $xeGantt,
             keyboard: true,
-            columns: this.visibleColumn.slice(0),
+            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) {
@@ -23888,7 +24262,7 @@ const {
             if (selected.row && selected.column) {
               params.row = selected.row;
               params.column = selected.column;
-              this.handleOpenMenuEvent(evnt, type, params);
+              $xeTable.handleOpenMenuEvent(evnt, type, params);
               return;
             }
           }
@@ -23896,16 +24270,16 @@ const {
         // 分别匹配表尾、内容、表尾的快捷菜单
         for (let index = 0; index < layoutList.length; index++) {
           const layout = layoutList[index];
-          const columnTargetNode = getEventTargetNode(evnt, this.$el, `vxe-${layout}--column`, target => {
+          const columnTargetNode = getEventTargetNode(evnt, el, `vxe-${layout}--column`, target => {
             // target=td|th，直接向上找 table 去匹配即可
-            return target.parentNode.parentNode.parentNode.getAttribute('xid') === tId;
+            return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID;
           });
           const params = {
             type: layout,
             $table: $xeTable,
             $grid: $xeGrid,
             $gantt: $xeGantt,
-            columns: this.visibleColumn.slice(0),
+            columns: visibleColumn.slice(0),
             $event: evnt
           };
           if (columnTargetNode.flag) {
@@ -23930,41 +24304,44 @@ const {
               }
             }
             const eventType = `${typePrefix}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`, 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.$el).flag) {
-        this.closeFilter();
+        $xeTable.closeFilter();
       }
-      this.closeMenu();
+      $xeTable.closeMenu();
     },
     /**
      * 显示快捷菜单
      */
     handleOpenMenuEvent(evnt, type, params) {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const internalData = $xeTable;
       const {
-        isCtxMenu,
-        ctxMenuStore,
-        ctxMenuOpts
-      } = this;
-      const config = ctxMenuOpts[type];
-      const visibleMethod = ctxMenuOpts.visibleMethod;
+        ctxMenuStore
+      } = reactData;
+      const isMenu = $xeTable.computeIsMenu;
+      const menuOpts = $xeTable.computeMenuOpts;
+      const config = menuOpts[type];
+      const visibleMethod = menuOpts.visibleMethod;
       if (config) {
         const {
           options,
@@ -23972,12 +24349,12 @@ const {
         } = 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,
@@ -23987,21 +24364,22 @@ const {
               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.$el;
                   const clientHeight = ctxElem.clientHeight;
                   const clientWidth = ctxElem.clientWidth;
                   const {
@@ -24024,30 +24402,36 @@ const {
                 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, item, child) {
+      const $xeTable = this;
+      const reactData = $xeTable;
       const menuElem = evnt.currentTarget;
-      const ctxMenuStore = this.ctxMenuStore;
+      const {
+        ctxMenuStore
+      } = reactData;
       evnt.preventDefault();
       evnt.stopPropagation();
       ctxMenuStore.selected = item;
@@ -24055,7 +24439,7 @@ const {
       if (!child) {
         ctxMenuStore.showChild = hasChildrenList(item);
         if (ctxMenuStore.showChild) {
-          this.$nextTick(() => {
+          $xeTable.$nextTick(() => {
             const childWrapperElem = menuElem.nextElementSibling;
             if (childWrapperElem) {
               const {
@@ -24090,7 +24474,11 @@ const {
       }
     },
     ctxMenuMouseoutEvent(evnt, item) {
-      const ctxMenuStore = this.ctxMenuStore;
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        ctxMenuStore
+      } = reactData;
       if (!item.children) {
         ctxMenuStore.selected = null;
       }
@@ -24103,27 +24491,28 @@ const {
       const $xeTable = this;
       const $xeGrid = $xeTable.$xeGrid;
       const $xeGantt = $xeTable.$xeGantt;
+      const internalData = $xeTable;
       // 如果一级菜单有配置 code 则允许点击，否则不能点击
       if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
         const gMenuOpts = mixin_menus.get(menu.code);
-        const params = Object.assign({
+        const params = Object.assign({}, internalData._currMenuParams, {
           menu,
           $table: $xeTable,
           $grid: $xeGrid,
           $gantt: $xeGantt,
           $event: evnt
-        }, this.ctxMenuStore.args);
+        });
         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', params, evnt);
         } else {
           $xeTable.dispatchEvent('menu-click', params, evnt);
         }
-        this.closeMenu();
+        $xeTable.closeMenu();
       }
     }
   }
@@ -29115,12 +29504,19 @@ function handleUpdateMergeBodyCells($xeTable, merges) {
   internalData.mergeBodyCellMaps = {};
   $xeTable.setMergeCells(merges);
 }
+function handleUpdateMergeHeaderCells($xeTable, merges) {
+  const internalData = $xeTable;
+  internalData.mergeHeaderList = [];
+  internalData.mergeHeaderMaps = {};
+  internalData.mergeHeaderCellMaps = {};
+  $xeTable.setMergeHeaderCells(merges);
+}
 function handleUpdateMergeFooterCells($xeTable, merges) {
   const internalData = $xeTable;
   internalData.mergeFooterList = [];
   internalData.mergeFooterMaps = {};
   internalData.mergeFooterCellMaps = {};
-  $xeTable.setMergeFooterItems(merges);
+  $xeTable.setMergeFooterCells(merges);
 }
 function handleKeyField($xeTable) {
   const internalData = $xeTable;
@@ -29427,7 +29823,9 @@ function renderScrollX(h, $xeTable) {
   }, [h('div', {
     ref: 'refScrollXSpaceElem',
     class: 'vxe-table--scroll-x-space'
-  })])]), h('div', {
+  })]), h('div', {
+    class: 'vxe-table--scroll-x-handle-appearance'
+  })]), h('div', {
     ref: 'refScrollXRightCornerElem',
     class: 'vxe-table--scroll-x-right-corner'
   })]);
@@ -29544,9 +29942,7 @@ function renderBody(h, $xeTable) {
   },
   data() {
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    return {
-      xID,
-      tId: xID,
+    const reactData = {
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -29567,6 +29963,8 @@ function renderBody(h, $xeTable) {
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       // 行高
       rowHeight: 0,
       // 表格父容器的高度
@@ -29592,9 +29990,13 @@ function renderBody(h, $xeTable) {
       expandColumn: null,
       checkboxColumn: null,
       radioColumn: null,
-      hasFixedColumn: false,
       // 树节点列信息
       treeNodeColumn: null,
+      hasFixedColumn: false,
+      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
+      upDataFlag: 0,
+      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
+      reColumnFlag: 0,
       // 初始化标识
       initStore: {
         filter: false,
@@ -29602,11 +30004,6 @@ function renderBody(h, $xeTable) {
         export: false,
         custom: false
       },
-      customColumnList: [],
-      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
-      upDataFlag: 0,
-      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
-      reColumnFlag: 0,
       // 自定义列相关的信息
       customStore: {
         btnEl: null,
@@ -29620,6 +30017,7 @@ function renderBody(h, $xeTable) {
         oldFixedMaps: {},
         oldVisibleMaps: {}
       },
+      customColumnList: [],
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -29688,6 +30086,7 @@ function renderBody(h, $xeTable) {
       tooltipStore: {
         row: null,
         column: null,
+        content: null,
         visible: false,
         currOpts: {}
       },
@@ -29720,8 +30119,8 @@ function renderBody(h, $xeTable) {
         columns: [],
         isPrint: false,
         hasFooter: false,
-        hasTree: false,
         hasMerge: false,
+        hasTree: false,
         hasColgroup: false,
         visible: false
       },
@@ -29752,6 +30151,7 @@ function renderBody(h, $xeTable) {
       pendingRowFlag: 1,
       insertRowFlag: 1,
       removeRowFlag: 1,
+      mergeHeadFlag: 1,
       mergeBodyFlag: 1,
       mergeFootFlag: 1,
       rowHeightStore: {
@@ -29768,6 +30168,7 @@ function renderBody(h, $xeTable) {
       scrollXLeft: 0,
       scrollXWidth: 0,
       isScrollXBig: false,
+      lazScrollLoading: false,
       rowExpandHeightFlag: 1,
       calcCellHeightFlag: 1,
       resizeHeightFlag: 1,
@@ -29780,10 +30181,16 @@ function renderBody(h, $xeTable) {
       dragTipText: '',
       isDragResize: false,
       isRowLoading: false,
-      isColLoading: false,
+      isColLoading: false
+    };
+    return {
+      xID,
+      ...reactData,
+      // 私有属性
       reScrollFlag: 0,
       reLayoutFlag: 0,
       footFlag: 0,
+      mergeFooteCellFlag: 0,
       crossTableDragRowInfo: crossTableDragRowGlobal
     };
   },
@@ -30548,9 +30955,21 @@ function renderBody(h, $xeTable) {
       const $xeTable = this;
       handleUpdateMergeBodyCells($xeTable, value);
     },
-    mergeFooterItems(value) {
+    mergeHeaderCells(value) {
       const $xeTable = this;
-      handleUpdateMergeFooterCells($xeTable, value);
+      handleUpdateMergeHeaderCells($xeTable, value);
+    },
+    mergeFooterCells() {
+      this.mergeFooteCellFlag++;
+    },
+    mergeFooterItems() {
+      this.mergeFooteCellFlag++;
+    },
+    mergeFooteCellFlag() {
+      const $xeTable = this;
+      const props = $xeTable;
+      const mFooterCells = props.mergeFooterCells || props.mergeFooterItems;
+      handleUpdateMergeFooterCells($xeTable, mFooterCells || []);
     },
     computeRowGroupFields(val) {
       const $xeTable = this;
@@ -32705,6 +33124,8 @@ function grid_createInternalData() {
             let itemValue = null;
             if (itemRender) {
               const {
+                startField,
+                endField,
                 defaultValue
               } = itemRender;
               if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(defaultValue)) {
@@ -32714,6 +33135,10 @@ function grid_createInternalData() {
               } else if (!external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isUndefined(defaultValue)) {
                 itemValue = defaultValue;
               }
+              if (startField && endField) {
+                external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().set(fData, startField, null);
+                external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().set(fData, endField, null);
+              }
             }
             fData[field] = itemValue;
           }