vxe-table 4.12.0-beta.2 → 4.12.0-beta.21

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

@@ -3,7 +3,7 @@ import { VxeUI } from '../../../ui'
 import { getRefElem } from '../../src/util'
 import { browse, hasClass, getAbsolutePos, addClass, removeClass } from '../../../ui/src/dom'
 
-import type { TableKeyboardPrivateMethods } from '../../../../types'
+import type { TableKeyboardPrivateMethods, VxeTableDefines } from '../../../../types'
 
 const { hooks } = VxeUI
 
@@ -33,7 +33,7 @@ hooks.add('tableKeyboardModule', {
   setupTable ($xeTable) {
     const { props, reactData, internalData } = $xeTable
     const { refElem } = $xeTable.getRefMaps()
-    const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeColumnOpts, computeCellOpts, computeDefaultRowHeight, computeCurrentRowOpts, computeCurrentColumnOpts } = $xeTable.getComputeMaps()
 
     function getCheckboxRangeRows (evnt: MouseEvent, params: any, targetTrElem: HTMLElement, trRect: DOMRect, offsetClientTop: number, moveRange: number) {
       const { showOverflow } = props
@@ -282,7 +282,11 @@ hooks.add('tableKeyboardModule', {
         const { editConfig } = props
         const { afterFullData, visibleColumn } = internalData
         const editOpts = computeEditOpts.value
-        let targetRow
+        const rowOpts = computeRowOpts.value
+        const currentRowOpts = computeCurrentRowOpts.value
+        const columnOpts = computeColumnOpts.value
+        const currentColumnOpts = computeCurrentColumnOpts.value
+        let targetRow: any
         let targetRowIndex: any
         let targetColumnIndex: any
         const params = Object.assign({}, args)
@@ -324,18 +328,28 @@ hooks.add('tableKeyboardModule', {
           params.columnIndex = targetColumnIndex
           params.column = targetColumn
           params.cell = $xeTable.getCellElement(params.row, params.column)
+          if (rowOpts.isCurrent && currentRowOpts.isFollowSelected) {
+            $xeTable.triggerCurrentRowEvent(evnt, params)
+          }
+          if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
+            $xeTable.triggerCurrentColumnEvent(evnt, params)
+          }
           if (editConfig) {
             if (editOpts.trigger === 'click' || editOpts.trigger === 'dblclick') {
               if (editOpts.mode === 'row') {
                 $xeTable.handleEdit(params, evnt)
               } else {
                 $xeTable.scrollToRow(params.row, params.column)
-                  .then(() => $xeTable.handleSelected(params, evnt))
+                  .then(() => {
+                    $xeTable.handleSelected(params, evnt)
+                  })
               }
             }
           } else {
             $xeTable.scrollToRow(params.row, params.column)
-              .then(() => $xeTable.handleSelected(params, evnt))
+              .then(() => {
+                $xeTable.handleSelected(params, evnt)
+              })
           }
         }
       },
@@ -347,7 +361,6 @@ hooks.add('tableKeyboardModule', {
         const treeOpts = computeTreeOpts.value
         const childrenField = treeOpts.children || treeOpts.childrenField
         let targetRow
-        evnt.preventDefault()
         if (currentRow) {
           if (treeConfig) {
             const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField })
@@ -368,6 +381,7 @@ hooks.add('tableKeyboardModule', {
           targetRow = afterFullData[0]
         }
         if (targetRow) {
+          evnt.preventDefault()
           const params = {
             $table: $xeTable,
             row: targetRow,
@@ -378,6 +392,33 @@ hooks.add('tableKeyboardModule', {
             .then(() => $xeTable.triggerCurrentRowEvent(evnt, params))
         }
       },
+      // 处理当前列方向键移动
+      moveCurrentColumn (isLeftArrow, isRightArrow, evnt) {
+        const { currentColumn } = reactData
+        const { visibleColumn } = internalData
+        let targetCol: VxeTableDefines.ColumnInfo | null = null
+        if (currentColumn) {
+          const _columnIndex = $xeTable.getVTColumnIndex(currentColumn)
+          if (isLeftArrow && _columnIndex > 0) {
+            targetCol = visibleColumn[_columnIndex - 1]
+          } else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+            targetCol = visibleColumn[_columnIndex + 1]
+          }
+        } else {
+          targetCol = visibleColumn[0]
+        }
+        if (targetCol) {
+          evnt.preventDefault()
+          const params = {
+            $table: $xeTable,
+            column: targetCol,
+            columnIndex: $xeTable.getColumnIndex(targetCol),
+            $columnIndex: $xeTable.getVMColumnIndex(targetCol)
+          }
+          $xeTable.scrollToColumn(targetCol)
+            .then(() => $xeTable.triggerCurrentColumnEvent(evnt, params))
+        }
+      },
       // 处理可编辑方向键移动
       moveSelected (args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
         const { afterFullData, visibleColumn } = internalData

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

@@ -109,8 +109,8 @@ hooks.add('tableValidatorModule', {
     const beginValidate = (rows: any, cols: VxeTableDefines.ColumnInfo[] | null, cb: any, isFull?: boolean): Promise<any> => {
       const validRest: any = {}
       const { editRules, treeConfig } = props
-      const { editStore, pendingRowMaps } = reactData
-      const { afterFullData } = internalData
+      const { editStore } = reactData
+      const { afterFullData, pendingRowMaps } = internalData
       const { removeMaps } = editStore
       const treeOpts = computeTreeOpts.value
       const childrenField = treeOpts.children || treeOpts.childrenField

package/packages/table/render/index.ts

@@ -6,10 +6,9 @@ import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils'
 import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
 
-import type { VxeButtonComponent } from 'vxe-pc-ui'
 import type { VxeGlobalRendererHandles, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
-const { getConfig, renderer, getI18n } = VxeUI
+const { getConfig, renderer, getI18n, getComponent } = VxeUI
 
 const componentDefaultModelProp = 'modelValue'
 
@@ -41,7 +40,7 @@ function getOldComponentName (name: string) {
 }
 
 function getDefaultComponent ({ name }: any) {
-  return resolveComponent(name) as ComponentOptions
+  return getComponent(name)
 }
 
 /**
@@ -393,7 +392,7 @@ function oldEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOpti
  */
 function oldButtonEditRender (renderOpts: any, params: any) {
   return [
-    h(resolveComponent('vxe-button') as VxeButtonComponent, {
+    h(getComponent('vxe-button'), {
       ...getCellEditProps(renderOpts, params, null),
       ...getComponentOns(renderOpts, params)
     })
@@ -609,6 +608,62 @@ function handleExportTreeSelectMethod (params: any) {
   return options.original ? getCellValue(row, column) : getTreeSelectCellValue(column.editRender || column.cellRender, params)
 }
 
+function handleNumberCell (renderOpts: VxeGlobalRendererHandles.RenderTableDefaultOptions, params: VxeGlobalRendererHandles.RenderTableDefaultParams) {
+  const { props = {}, showNegativeStatus } = renderOpts
+  const { row, column } = params
+  const { type } = props
+  let cellValue = XEUtils.get(row, column.field)
+  let isNegative = false
+  if (!isEmptyValue(cellValue)) {
+    const numberInputConfig = getConfig().numberInput || {}
+    if (type === 'float') {
+      const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true)
+      const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1)
+      cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits)
+      if (!autoFill) {
+        cellValue = XEUtils.toNumber(cellValue)
+      }
+      if (showNegativeStatus) {
+        if (cellValue < 0) {
+          isNegative = true
+        }
+      }
+    } else if (type === 'amount') {
+      const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true)
+      const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2)
+      const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false)
+      cellValue = XEUtils.toNumber(cellValue)
+      if (showNegativeStatus) {
+        if (cellValue < 0) {
+          isNegative = true
+        }
+      }
+      cellValue = XEUtils.commafy(cellValue, { digits })
+      if (!autoFill) {
+        const [iStr, dStr] = cellValue.split('.')
+        if (dStr) {
+          const dRest = dStr.replace(/0+$/, '')
+          cellValue = dRest ? [iStr, '.', dRest].join('') : iStr
+        }
+      }
+      if (showCurrency) {
+        cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}`
+      }
+    } else {
+      if (showNegativeStatus) {
+        if (XEUtils.toNumber(cellValue) < 0) {
+          isNegative = true
+        }
+      }
+    }
+  }
+  return getCellLabelVNs(renderOpts, params, cellValue, isNegative
+    ? {
+        class: 'is--negative'
+      }
+    : {})
+}
+
 /**
  * 表格 - 渲染器
  */
@@ -674,64 +729,19 @@ renderer.mixin({
     renderTableFilter: defaultFilterRender,
     tableFilterDefaultMethod: handleInputFilterMethod
   },
+  FormatNumberInput: {
+    renderTableDefault: handleNumberCell,
+    tableFilterDefaultMethod: handleInputFilterMethod,
+    tableExportMethod (params) {
+      const { row, column } = params
+      const cellValue = XEUtils.get(row, column.field)
+      return cellValue
+    }
+  },
   VxeNumberInput: {
     tableAutoFocus: 'input',
     renderTableEdit: defaultEditRender,
-    renderTableCell (renderOpts, params) {
-      const { props = {}, showNegativeStatus } = renderOpts
-      const { row, column } = params
-      const { type } = props
-      let cellValue = XEUtils.get(row, column.field)
-      let isNegative = false
-      if (!isEmptyValue(cellValue)) {
-        const numberInputConfig = getConfig().numberInput || {}
-        if (type === 'float') {
-          const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true)
-          const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1)
-          cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits)
-          if (!autoFill) {
-            cellValue = XEUtils.toNumber(cellValue)
-          }
-          if (showNegativeStatus) {
-            if (cellValue < 0) {
-              isNegative = true
-            }
-          }
-        } else if (type === 'amount') {
-          const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true)
-          const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2)
-          const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false)
-          cellValue = XEUtils.toNumber(cellValue)
-          if (showNegativeStatus) {
-            if (cellValue < 0) {
-              isNegative = true
-            }
-          }
-          cellValue = XEUtils.commafy(cellValue, { digits })
-          if (!autoFill) {
-            const [iStr, dStr] = cellValue.split('.')
-            if (dStr) {
-              const dRest = dStr.replace(/0+$/, '')
-              cellValue = dRest ? [iStr, '.', dRest].join('') : iStr
-            }
-          }
-          if (showCurrency) {
-            cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}`
-          }
-        } else {
-          if (showNegativeStatus) {
-            if (XEUtils.toNumber(cellValue) < 0) {
-              isNegative = true
-            }
-          }
-        }
-      }
-      return getCellLabelVNs(renderOpts, params, cellValue, isNegative
-        ? {
-            class: 'is--negative'
-          }
-        : {})
-    },
+    renderTableCell: handleNumberCell,
     renderTableFooter (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column, _columnIndex } = params
@@ -841,11 +851,22 @@ renderer.mixin({
     tableFilterDefaultMethod: handleFilterMethod,
     tableExportMethod: handleExportSelectMethod
   },
+  /**
+   * 已废弃，被 FormatSelect 替换
+   * @deprecated
+   */
   formatOption: {
     renderTableDefault (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     }
   },
+  FormatSelect: {
+    renderTableDefault (renderOpts, params) {
+      return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
+    },
+    tableFilterDefaultMethod: handleFilterMethod,
+    tableExportMethod: handleExportSelectMethod
+  },
   VxeTreeSelect: {
     tableAutoFocus: 'input',
     renderTableEdit: defaultTableOrTreeSelectEditRender,
@@ -854,11 +875,21 @@ renderer.mixin({
     },
     tableExportMethod: handleExportTreeSelectMethod
   },
+  /**
+   * 已废弃，被 FormatTreeSelect 替换
+   * @deprecated
+   */
   formatTree: {
     renderTableDefault (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params))
     }
   },
+  FormatTreeSelect: {
+    renderTableDefault (renderOpts, params) {
+      return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params))
+    },
+    tableExportMethod: handleExportTreeSelectMethod
+  },
   VxeTableSelect: {
     tableAutoFocus: 'input',
     renderTableEdit: defaultTableOrTreeSelectEditRender,

package/packages/table/src/body.ts

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util'
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid, createHandleGetRowId } from './util'
 import { updateCellTitle, getPropClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -45,7 +45,7 @@ export default defineComponent({
       return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
     }
 
-    const renderLine = (params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) => {
+    const renderLine = (rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) => {
       const { row, column } = params
       const { afterFullData } = tableInternalData
       const { treeConfig } = tableProps
@@ -55,7 +55,6 @@ export default defineComponent({
       if (slots && (slots as any).line) {
         return $xeTable.callSlot((slots as any).line, params)
       }
-      const rowid = getRowid($xeTable, row)
       const rest = fullAllDataRowIdData[rowid]
       let rLevel = 0
       let prevRow = null
@@ -230,6 +229,7 @@ export default defineComponent({
       tdOns.onDblclick = (evnt: MouseEvent) => {
         $xeTable.triggerCellDblclickEvent(evnt, cellParams)
       }
+      let isMergeCell = false
       // 合并行或列
       if (mergeList.length) {
         const spanRest = mergeBodyMethod(mergeList, _rowIndex, _columnIndex)
@@ -239,9 +239,11 @@ export default defineComponent({
             return null
           }
           if (rowspan > 1) {
+            isMergeCell = true
             tdAttrs.rowspan = rowspan
           }
           if (colspan > 1) {
+            isMergeCell = true
             tdAttrs.colspan = colspan
           }
         }
@@ -276,11 +278,13 @@ export default defineComponent({
       const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
       let isVNPreEmptyStatus = false
-      if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-        if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
-          isVNPreEmptyStatus = true
-        } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-          isVNPreEmptyStatus = true
+      if (!isMergeCell) {
+        if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
+          if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+            isVNPreEmptyStatus = true
+          } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+            isVNPreEmptyStatus = true
+          }
         }
       }
 
@@ -307,7 +311,7 @@ export default defineComponent({
       } else {
         // 渲染单元格
         tdVNs.push(
-          ...renderLine(cellParams, cellHeight),
+          ...renderLine(rowid, cellParams, cellHeight),
           h('div', {
             key: 'tc',
             class: ['vxe-cell', {
@@ -431,8 +435,8 @@ export default defineComponent({
 
     const renderRows = (fixedType: 'left' | 'right' | '', isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) => {
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove, rowExpandHeightFlag } = tableReactData
-      const { fullAllDataRowIdData } = tableInternalData
+      const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag } = tableReactData
+      const { fullAllDataRowIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
       const treeOpts = computeTreeOpts.value
@@ -443,6 +447,7 @@ export default defineComponent({
       const { transform, seqMode } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const rows: any[] = []
+      const { handleGetRowId } = createHandleGetRowId($xeTable)
       tableData.forEach((row, $rowIndex) => {
         const trOn: Record<string, any> = {}
         let rowIndex = $rowIndex
@@ -463,7 +468,7 @@ export default defineComponent({
             $xeTable.clearHoverRow()
           }
         }
-        const rowid = getRowid($xeTable, row)
+        const rowid = handleGetRowId(row)
         const rowRest = fullAllDataRowIdData[rowid]
         let rowLevel = 0
         let seq: string | number = -1
@@ -479,7 +484,7 @@ export default defineComponent({
         }
         const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
         // 行是否被展开
-        const isExpandRow = expandColumn && !!rowExpandedMaps[rowid]
+        const isExpandRow = expandColumn && !!rowExpandedFlag && !!rowExpandedMaps[rowid]
         // 树节点是否被展开
         let isExpandTree = false
         let rowChildren = []
@@ -489,7 +494,7 @@ export default defineComponent({
         }
         if (treeConfig && !scrollYLoad && !transform) {
           rowChildren = row[childrenField]
-          isExpandTree = rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
+          isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
         }
         // 拖拽行事件
         if (rowOpts.drag && (!treeConfig || transform)) {
@@ -508,7 +513,7 @@ export default defineComponent({
             'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
             'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
             'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-            'row--pending': !!pendingRowMaps[rowid]
+            'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
           },
           getPropClass(rowClassName, params)
         ]
@@ -657,7 +662,7 @@ export default defineComponent({
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }
 

package/packages/table/src/cell.ts

@@ -415,8 +415,8 @@ export const Cell = {
     const tableReactData = $table.reactData
     const tableInternalData = $table.internalData
     const { computeTreeOpts } = $table.getComputeMaps()
-    const { treeExpandedMaps, treeExpandLazyLoadedMaps } = tableReactData
-    const { fullAllDataRowIdData } = tableInternalData
+    const { treeExpandedFlag } = tableReactData
+    const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData
     const treeOpts = computeTreeOpts.value
     const { row, column, level } = params
     const { slots } = column
@@ -436,7 +436,7 @@ export const Cell = {
     }
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isActive = !!treeExpandedMaps[rowid]
+      isActive = !!treeExpandedFlag && !!treeExpandedMaps[rowid]
       if (lazy) {
         const rest = fullAllDataRowIdData[rowid]
         isLazyLoading = !!treeExpandLazyLoadedMaps[rowid]
@@ -598,7 +598,8 @@ export const Cell = {
     const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
     const checkboxOpts = computeCheckboxOpts.value
-    const headerTitle = column.getTitle()
+    const { checkStrictly, showHeader, headerTitle } = checkboxOpts
+    const colTitle = column.getTitle()
     const ons: Record<string, any> = {}
     if (!isHidden) {
       ons.onClick = (evnt: MouseEvent) => {
@@ -611,11 +612,11 @@ export const Cell = {
     if (headerSlot) {
       return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams)))
     }
-    if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
+    if (checkStrictly ? !showHeader : showHeader === false) {
       return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
         h('span', {
           class: 'vxe-checkbox--label'
-        }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
+        }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
       ]))
     }
     return renderHeaderCellBaseVNs(params,
@@ -626,17 +627,17 @@ export const Cell = {
             'is--disabled': isAllCheckboxDisabled,
             'is--indeterminate': isAllCheckboxIndeterminate
           }],
-          title: getI18n('vxe.table.allTitle'),
+          title: XEUtils.eqNull(headerTitle) ? getI18n('vxe.table.allTitle') : `${headerTitle || ''}`,
           ...ons
         }, [
           h('span', {
             class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
           })
-        ].concat(titleSlot || headerTitle
+        ].concat(titleSlot || colTitle
           ? [
               h('span', {
                 class: 'vxe-checkbox--label'
-              }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
+              }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
             ]
           : []))
       ])
@@ -646,8 +647,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table.props
     const tableReactData = $table.reactData
+    const tableInternalData = $table.internalData
     const { treeConfig } = tableProps
-    const { selectCheckboxMaps, treeIndeterminateMaps } = tableReactData
+    const { updateCheckboxFlag } = tableReactData
+    const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData
     const { computeCheckboxOpts } = $table.getComputeMaps()
     const checkboxOpts = computeCheckboxOpts.value
     const { labelField, checkMethod, visibleMethod } = checkboxOpts
@@ -661,7 +664,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = !!selectCheckboxMaps[rowid]
+      isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid]
       ons.onClick = (evnt: MouseEvent) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -671,7 +674,7 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
       if (treeConfig) {
-        indeterminate = !!treeIndeterminateMaps[rowid]
+        indeterminate = !!treeIndeterminateRowMaps[rowid]
       }
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
@@ -712,8 +715,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table.props
     const tableReactData = $table.reactData
+    const tableInternalData = $table.internalData
     const { treeConfig } = tableProps
-    const { treeIndeterminateMaps } = tableReactData
+    const { updateCheckboxFlag } = tableReactData
+    const { treeIndeterminateRowMaps } = tableInternalData
     const { computeCheckboxOpts } = $table.getComputeMaps()
     const checkboxOpts = computeCheckboxOpts.value
     const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts
@@ -728,7 +733,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = XEUtils.get(row, checkField as string)
+      isChecked = !!updateCheckboxFlag && XEUtils.get(row, checkField)
       ons.onClick = (evnt: MouseEvent) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -738,7 +743,7 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
       if (treeConfig) {
-        isIndeterminate = !!treeIndeterminateMaps[rowid]
+        isIndeterminate = !!treeIndeterminateRowMaps[rowid]
       }
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate }
@@ -781,8 +786,8 @@ export const Cell = {
    */
   renderExpandCell (params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, isHidden, row, column } = params
-    const tableReactData = $table.reactData
-    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData
+    const tableInternalData = $table.internalData
+    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData
     const { computeExpandOpts } = $table.getComputeMaps()
     const expandOpts = computeExpandOpts.value
     const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts
@@ -889,7 +894,7 @@ export const Cell = {
     const { $table, column } = params
     const { computeSortOpts } = $table.getComputeMaps()
     const sortOpts = computeSortOpts.value
-    const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
+    const { showIcon, allowBtn, ascTitle, descTitle, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
     const { order } = column
     if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
       return [
@@ -900,7 +905,7 @@ export const Cell = {
             class: ['vxe-sort--asc-btn', iconAsc || getIcon().TABLE_SORT_ASC, {
               'sort--active': order === 'asc'
             }],
-            title: getI18n('vxe.table.sortAsc'),
+            title: XEUtils.eqNull(ascTitle) ? getI18n('vxe.table.sortAsc') : `${ascTitle || ''}`,
             onClick: allowBtn
               ? (evnt: Event) => {
                   evnt.stopPropagation()
@@ -912,7 +917,7 @@ export const Cell = {
             class: ['vxe-sort--desc-btn', iconDesc || getIcon().TABLE_SORT_DESC, {
               'sort--active': order === 'desc'
             }],
-            title: getI18n('vxe.table.sortDesc'),
+            title: XEUtils.eqNull(descTitle) ? getI18n('vxe.table.sortDesc') : `${descTitle || ''}`,
             onClick: allowBtn
               ? (evnt: Event) => {
                   evnt.stopPropagation()

package/packages/table/src/footer.ts

@@ -137,6 +137,7 @@ export default defineComponent({
         tfOns.onDblclick = (evnt: MouseEvent) => {
           $xeTable.dispatchEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
         }
+        let isMergeCell = false
         // 合并行或列
         if (mergeFooterList.length) {
           const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex)
@@ -146,9 +147,11 @@ export default defineComponent({
               return null
             }
             if (rowspan > 1) {
+              isMergeCell = true
               attrs.rowspan = rowspan
             }
             if (colspan > 1) {
+              isMergeCell = true
               attrs.colspan = colspan
             }
           }
@@ -169,8 +172,10 @@ export default defineComponent({
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
         let isVNPreEmptyStatus = false
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-          isVNPreEmptyStatus = true
+        if (!isMergeCell) {
+          if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+            isVNPreEmptyStatus = true
+          }
         }
 
         const tcStyle: Record<string, string> = {}
@@ -267,7 +272,7 @@ export default defineComponent({
       const { fixedType, fixedColumn, tableColumn } = props
       const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps
       const { visibleColumn, fullColumnIdData } = tableInternalData
-      const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+      const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
 
       let renderColumnList = tableColumn
       let isOptimizeMode = false
@@ -280,7 +285,7 @@ export default defineComponent({
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }