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

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

@@ -161,8 +161,8 @@ export default {
 
       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 = $xeTable.computeTreeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField

package/packages/table/render/index.ts

@@ -8,7 +8,7 @@ import { errLog } from '../../ui/src/log'
 
 import type { VxeGlobalRendererHandles, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
-const { getConfig, renderer, getI18n } = VxeUI
+const { getConfig, renderer, getI18n, getComponent } = VxeUI
 
 const componentDefaultModelProp = 'value'
 
@@ -48,7 +48,7 @@ function getOldComponent ({ name }: any) {
 }
 
 function getDefaultComponent ({ name }: any) {
-  return name
+  return getComponent(name) || name
 }
 
 function handleConfirmFilter (params: any, checked: any, option: any) {
@@ -620,6 +620,62 @@ function handleExportTreeSelectMethod (params: any) {
   return options.original ? getCellValue(row, column) : getTreeSelectCellValue(column.editRender || column.cellRender, params)
 }
 
+function handleNumberCell (h: CreateElement, 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(h, renderOpts, params, cellValue, isNegative
+    ? {
+        class: 'is--negative'
+      }
+    : {})
+}
+
 /**
  * 表格 - 渲染器
  */
@@ -685,64 +741,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 (h, 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(h, renderOpts, params, cellValue, isNegative
-        ? {
-            class: 'is--negative'
-          }
-        : {})
-    },
+    renderTableCell: handleNumberCell,
     renderTableFooter (h, renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column, _columnIndex } = params
@@ -849,11 +860,22 @@ renderer.mixin({
     tableFilterDefaultMethod: handleFilterMethod,
     tableExportMethod: handleExportSelectMethod
   },
+  /**
+   * 已废弃，被 FormatSelect 替换
+   * @deprecated
+   */
   formatOption: {
     renderTableDefault (h, renderOpts, params) {
       return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params))
     }
   },
+  FormatSelect: {
+    renderTableDefault (h, renderOpts, params) {
+      return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params))
+    },
+    tableFilterDefaultMethod: handleFilterMethod,
+    tableExportMethod: handleExportSelectMethod
+  },
   VxeTreeSelect: {
     tableAutoFocus: 'input',
     renderTableEdit: defaultTableOrTreeSelectEditRender,
@@ -870,11 +892,21 @@ renderer.mixin({
     },
     tableExportMethod: handleExportTreeSelectMethod
   },
+  /**
+   * 已废弃，被 FormatTreeSelect 替换
+   * @deprecated
+   */
   formatTree: {
     renderTableDefault (h, renderOpts, params) {
       return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params))
     }
   },
+  FormatTreeSelect: {
+    renderTableDefault (h, renderOpts, params) {
+      return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params))
+    },
+    tableExportMethod: handleExportTreeSelectMethod
+  },
   VxeColorPicker: {
     tableAutoFocus: 'input',
     renderTableEdit (h, renderOpts, params: VxeGlobalRendererHandles.RenderTableEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {

package/packages/table/src/body.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { isEnableConf, getClass } from '../../ui/src/utils'
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util'
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid, createHandleGetRowId } from './util'
 import { updateCellTitle } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 
@@ -22,7 +22,7 @@ const isVMScrollProcess = ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
 }
 
-function renderLine (h: CreateElement, _vm: any, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) {
+function renderLine (h: CreateElement, _vm: any, rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) {
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
   const tableInternalData = $xeTable as unknown as TableInternalData
@@ -36,7 +36,6 @@ function renderLine (h: CreateElement, _vm: any, params: VxeTableDefines.CellRen
   if (slots && (slots as any).line) {
     return $xeTable.callSlot((slots as any).line, params, h)
   }
-  const rowid = getRowid($xeTable, row)
   const rest = fullAllDataRowIdData[rowid]
   let rLevel = 0
   let prevRow = null
@@ -217,6 +216,7 @@ function renderTdColumn (
   tdOns.dblclick = (evnt: MouseEvent) => {
     $xeTable.triggerCellDblclickEvent(evnt, cellParams)
   }
+  let isMergeCell = false
   // 合并行或列
   if (mergeList.length) {
     const spanRest = mergeBodyMethod(mergeList, _rowIndex, _columnIndex)
@@ -226,9 +226,11 @@ function renderTdColumn (
         return null
       }
       if (rowspan > 1) {
+        isMergeCell = true
         tdAttrs.rowspan = rowspan
       }
       if (colspan > 1) {
+        isMergeCell = true
         tdAttrs.colspan = colspan
       }
     }
@@ -263,11 +265,13 @@ function renderTdColumn (
   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
+      }
     }
   }
 
@@ -294,7 +298,7 @@ function renderTdColumn (
   } else {
     // 渲染单元格
     tdVNs.push(
-      ...renderLine(h, _vm, cellParams, cellHeight),
+      ...renderLine(h, _vm, rowid, cellParams, cellHeight),
       h('div', {
         key: 'tc',
         class: ['vxe-cell', {
@@ -431,8 +435,8 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   const tableInternalData = $xeTable as unknown as TableInternalData
 
   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 = $xeTable.computeCheckboxOpts
   const radioOpts = $xeTable.computeRadioOpts
   const treeOpts = $xeTable.computeTreeOpts
@@ -443,6 +447,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   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 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
         $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 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
     }
     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 = []
@@ -490,7 +495,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
     }
     if (treeConfig && !scrollYLoad && !transform) {
       rowChildren = row[childrenField]
-      isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid]
+      isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
     }
     // 拖拽行事件
     if (rowOpts.drag && (!treeConfig || transform)) {
@@ -509,7 +514,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
         'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
         'row--radio': radioOpts.highlight && selectRadioRow === row,
         'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-        'row--pending': !!pendingRowMaps[rowid]
+        'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
       },
       rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
     ]
@@ -690,7 +695,7 @@ export default {
       }
     }
 
-    if (fixedType || !overflowX) {
+    if (!isColLoading && (fixedType || !overflowX)) {
       renderColumnList = visibleColumn
     }
 

package/packages/table/src/cell.ts

@@ -402,8 +402,8 @@ export const Cell = {
     const { $table, isHidden } = params
     const tableReactData = $table as unknown as TableReactData
     const tableInternalData = $table as unknown as TableInternalData
-    const { treeExpandedMaps, treeExpandLazyLoadedMaps } = tableReactData
-    const { fullAllDataRowIdData } = tableInternalData
+    const { treeExpandedFlag } = tableReactData
+    const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData
     const treeOpts = $table.computeTreeOpts
     const { row, column, level } = params
     const { slots } = column
@@ -423,7 +423,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]
@@ -580,7 +580,8 @@ export const Cell = {
     const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
     const checkboxOpts = $table.computeCheckboxOpts
-    const headerTitle = column.getTitle()
+    const { checkStrictly, showHeader, headerTitle } = checkboxOpts
+    const colTitle = column.getTitle()
     const ons: Record<string, any> = {}
     if (!isHidden) {
       ons.click = (evnt: any) => {
@@ -593,11 +594,11 @@ export const Cell = {
     if (headerSlot) {
       return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)))
     }
-    if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
+    if (checkStrictly ? !showHeader : showHeader === false) {
       return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
         h('span', {
           class: 'vxe-checkbox--label'
-        }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
+        }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : colTitle)
       ]))
     }
     return renderHeaderCellBaseVNs(h, params,
@@ -609,18 +610,18 @@ export const Cell = {
             'is--indeterminate': isAllCheckboxIndeterminate
           }],
           attrs: {
-            title: getI18n('vxe.table.allTitle')
+            title: XEUtils.eqNull(headerTitle) ? getI18n('vxe.table.allTitle') : `${headerTitle || ''}`
           },
           on: 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, h) : headerTitle)
+              }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : colTitle)
             ]
           : []))
       ])
@@ -630,8 +631,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table
     const tableReactData = $table as unknown as TableReactData
+    const tableInternalData = $table as unknown as TableInternalData
     const { treeConfig } = tableProps
-    const { selectCheckboxMaps, treeIndeterminateMaps } = tableReactData
+    const { updateCheckboxFlag } = tableReactData
+    const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData
     const checkboxOpts = $table.computeCheckboxOpts
     const { labelField, checkMethod, visibleMethod } = checkboxOpts
     const { slots } = column
@@ -644,7 +647,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = !!selectCheckboxMaps[rowid]
+      isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid]
       ons.click = (evnt: any) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -654,7 +657,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 }
@@ -695,8 +698,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table
     const tableReactData = $table as unknown as TableReactData
+    const tableInternalData = $table as unknown as TableInternalData
     const { treeConfig } = tableProps
-    const { treeIndeterminateMaps } = tableReactData
+    const { updateCheckboxFlag } = tableReactData
+    const { treeIndeterminateRowMaps } = tableInternalData
     const checkboxOpts = $table.computeCheckboxOpts
     const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts
     const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField
@@ -710,7 +715,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = XEUtils.get(row, checkField)
+      isChecked = !!updateCheckboxFlag && XEUtils.get(row, checkField)
       ons.click = (evnt: any) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -720,7 +725,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 }
@@ -763,8 +768,8 @@ export const Cell = {
    */
   renderExpandCell (h: CreateElement, params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, isHidden, row, column } = params
-    const tableReactData = $table as unknown as TableReactData
-    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData
+    const tableInternalData = $table as unknown as TableInternalData
+    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData
     const expandOpts = $table.computeExpandOpts
     const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts
     const { slots } = column
@@ -871,7 +876,7 @@ export const Cell = {
   renderSortIcon (h: CreateElement, params: (VxeTableDefines.CellRenderHeaderParams | VxeTableDefines.CellRenderHeaderParams) & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, column } = params
     const sortOpts = $table.computeSortOpts
-    const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
+    const { showIcon, allowBtn, ascTitle, descTitle, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
     if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
       return [
         h('span', {
@@ -882,7 +887,7 @@ export const Cell = {
               'sort--active': column.order === 'asc'
             }],
             attrs: {
-              title: getI18n('vxe.table.sortAsc')
+              title: XEUtils.eqNull(ascTitle) ? getI18n('vxe.table.sortAsc') : `${ascTitle || ''}`
             },
             on: allowBtn
               ? {
@@ -898,7 +903,7 @@ export const Cell = {
               'sort--active': column.order === 'desc'
             }],
             attrs: {
-              title: getI18n('vxe.table.sortDesc')
+              title: XEUtils.eqNull(descTitle) ? getI18n('vxe.table.sortDesc') : `${descTitle || ''}`
             },
             on: allowBtn
               ? {

package/packages/table/src/footer.ts

@@ -110,6 +110,7 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
     tfOns.dblclick = (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)
@@ -119,9 +120,11 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
           return null
         }
         if (rowspan > 1) {
+          isMergeCell = true
           attrs.rowspan = rowspan
         }
         if (colspan > 1) {
+          isMergeCell = true
           attrs.colspan = colspan
         }
       }
@@ -142,8 +145,10 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
     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> = {}
@@ -309,7 +314,7 @@ export default {
     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 as VxeTableDefines.ColumnInfo[]
     let isOptimizeMode = false
@@ -322,7 +327,7 @@ export default {
       }
     }
 
-    if (fixedType || !overflowX) {
+    if (!isColLoading && (fixedType || !overflowX)) {
       renderColumnList = visibleColumn
     }
 

package/packages/table/src/header.ts

@@ -272,7 +272,7 @@ export default {
     const { headerColumn } = this
 
     const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
-    const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+    const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
     const { visibleColumn, fullColumnIdData } = tableInternalData
 
     const mouseOpts = $xeTable.computeMouseOpts
@@ -292,7 +292,7 @@ export default {
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }