vxe-table 3.12.10-beta.8 → 3.12.10

package/packages/table/src/body.ts

@@ -6,7 +6,7 @@ import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util'
 import { updateCellTitle } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxeTableConstructor, VxeTableDefines, TableInternalData, VxeTablePrivateMethods, TableReactData, VxeColumnPropTypes, VxeComponentStyleType } from '../../../types'
+import type { VxeTableConstructor, VxeTableDefines, TableInternalData, VxeTablePrivateMethods, TableReactData, VxeComponentStyleType } from '../../../types'
 
 const { getI18n, renderer, renderEmptyElement } = VxeUI
 
@@ -18,11 +18,11 @@ const isVMScrollProcess = ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   const tableReactData = $xeTable as unknown as TableReactData
 
   const { delayHover } = tableProps
-  const { lastScrollTime, _isResize } = tableReactData
-  return !!(_isResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
+  const { lastScrollTime, isDragResize } = tableReactData
+  return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
 }
 
-function renderLine (h: CreateElement, _vm: any, params: VxeTableDefines.CellRenderBodyParams) {
+function renderLine (h: CreateElement, _vm: any, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) {
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
   const tableInternalData = $xeTable as unknown as TableInternalData
@@ -48,12 +48,14 @@ function renderLine (h: CreateElement, _vm: any, params: VxeTableDefines.CellRen
   if (treeConfig && treeNode && (treeOpts.showLine || treeOpts.line)) {
     return [
       h('div', {
+        key: 'tl',
         class: 'vxe-tree--line-wrapper'
       }, [
         h('div', {
           class: 'vxe-tree--line',
           style: {
             height: `${isFirstRow ? 1 : calcTreeLine(params, prevRow)}px`,
+            bottom: `-${Math.floor(cellHeight / 2)}px`,
             left: `${(rLevel * treeOpts.indent) + (rLevel ? 2 - getOffsetSize($xeTable) : 0) + 16}px`
           }
         })
@@ -71,7 +73,7 @@ function renderTdColumn (
   _vm: any,
   seq: number | string,
   rowid: string,
-  fixedType: VxeColumnPropTypes.Fixed,
+  fixedType: 'left' | 'right' | '',
   isOptimizeMode: boolean,
   rowLevel: number,
   row: any,
@@ -89,26 +91,29 @@ function renderTdColumn (
   const tableInternalData = $xeTable as unknown as TableInternalData
 
   const { fullAllDataRowIdData } = tableInternalData
-  const { columnKey, height, showOverflow: allColumnOverflow, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig } = tableProps
-  const { tableData, overflowX, currentColumn, scrollXLoad, scrollYLoad, isCalcCellHeight, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData
+  const { columnKey, resizable: allResizable, border, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
+  const { tableData, overflowX, currentColumn, scrollXLoad, scrollYLoad, calcCellHeightFlag, resizeHeightFlag, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData
   const { afterFullData, scrollXStore, scrollYStore } = tableInternalData
   const cellOpts = $xeTable.computeCellOpts
   const validOpts = $xeTable.computeValidOpts
   const checkboxOpts = $xeTable.computeCheckboxOpts
   const editOpts = $xeTable.computeEditOpts
   const tooltipOpts = $xeTable.computeTooltipOpts
+  const { isAllColumnDrag, isAllRowDrag } = $xeTable.resizableOpts
   const rowOpts = $xeTable.computeRowOpts
   const rowDragOpts = $xeTable.computeRowDragOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
+  const customCellHeight = cellOpts.height || rowOpts.height
+  const currCellHeight = customCellHeight || defaultRowHeight
   const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = rowDragOpts
   const columnOpts = $xeTable.computeColumnOpts
   const mouseOpts = $xeTable.computeMouseOpts
   const areaOpts = $xeTable.computeAreaOpts
   const { selectCellToRow } = areaOpts
-  const { type, cellRender, editRender, align, showOverflow, className, treeNode, slots } = column
-  const { verticalAlign } = cellOpts
+  const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column
+  const { verticalAlign: allVerticalAlign } = cellOpts
   const { actived } = editStore
-  const { height: customRHeight } = rowOpts
+  const rowRest = fullAllDataRowIdData[rowid]
   const colid = column.id
   const renderOpts = editRender || cellRender
   const compConf = renderOpts ? renderer.get(renderOpts.name) : null
@@ -118,21 +123,27 @@ function renderTdColumn (
   const columnIndex = $xeTable.getColumnIndex(column)
   const _columnIndex = $xeTable.getVTColumnIndex(column)
   const isEdit = isEnableConf(editRender)
+  const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0
   let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX
-  const cellOverflow = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow
+  const isCellPadding = XEUtils.eqNull(padding) ? (allPadding === null ? cellOpts.padding : allPadding) : padding
+  const cellOverflow = XEUtils.eqNull(showOverflow) ? isAllOverflow : showOverflow
   const showEllipsis = cellOverflow === 'ellipsis'
   const showTitle = cellOverflow === 'title'
   const showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
-  // 如果表格加上 showOverflow 则不再支持列单独设置
-  const hasEllipsis = allColumnOverflow || showTitle || showTooltip || showEllipsis
+  const hasEllipsis = isAllOverflow || showTitle || showTooltip || showEllipsis
+  const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
+  const isCsHeight = !!customCellHeight
+  const isRsHeight = resizeHeight > 0
   let isDirty
   const tdOns: any = {}
-  const rest = fullAllDataRowIdData[rowid]
   const cellAlign = align || (compConf ? compConf.tableCellAlign : '') || allAlign
+  const cellVerticalAlign = XEUtils.eqNull(verticalAlign) ? allVerticalAlign : verticalAlign
   const errorValidItem = validErrorMaps[`${rowid}:${colid}`]
   const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
-  const attrs: any = { colid }
-  const params: VxeTableDefines.CellRenderBodyParams = {
+  const tdAttrs: any = { colid }
+  const cellParams: VxeTableDefines.CellRenderBodyParams & {
+    $table: VxeTableConstructor<any> & VxeTablePrivateMethods
+  } = {
     $table: $xeTable,
     $grid: $xeTable.xegrid,
     isEdit: false,
@@ -160,7 +171,7 @@ function renderTdColumn (
     isRowDragCell = rowDragOpts.trigger === 'row' || (column.dragSort && rowDragOpts.trigger === 'cell')
   }
   if (isRowDragCell) {
-    isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params))
+    isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(cellParams))
   }
   // hover 进入事件
   if (showTitle || showTooltip || showAllTip || tooltipConfig) {
@@ -172,9 +183,9 @@ function renderTdColumn (
         updateCellTitle(evnt.currentTarget, column)
       } else if (showTooltip || showAllTip) {
         // 如果配置了显示 tooltip
-        $xeTable.triggerBodyTooltipEvent(evnt, params)
+        $xeTable.triggerBodyTooltipEvent(evnt, cellParams)
       }
-      $xeTable.dispatchEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, params), evnt)
+      $xeTable.dispatchEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
     }
   }
   // hover 退出事件
@@ -186,13 +197,13 @@ function renderTdColumn (
       if (showTooltip || showAllTip) {
         $xeTable.handleTargetLeaveEvent(evnt)
       }
-      $xeTable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, params), evnt)
+      $xeTable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
     }
   }
   // 按下事件处理
   if (isRowDragCell || checkboxOpts.range || mouseConfig) {
     tdOns.mousedown = (evnt: MouseEvent) => {
-      $xeTable.triggerCellMousedownEvent(evnt, params)
+      $xeTable.triggerCellMousedownEvent(evnt, cellParams)
     }
   }
   // 拖拽列事件
@@ -201,11 +212,11 @@ function renderTdColumn (
   }
   // 点击事件处理
   tdOns.click = (evnt: MouseEvent) => {
-    $xeTable.triggerCellClickEvent(evnt, params)
+    $xeTable.triggerCellClickEvent(evnt, cellParams)
   }
   // 双击事件处理
   tdOns.dblclick = (evnt: MouseEvent) => {
-    $xeTable.triggerCellDblclickEvent(evnt, params)
+    $xeTable.triggerCellDblclickEvent(evnt, cellParams)
   }
   // 合并行或列
   if (mergeList.length) {
@@ -216,28 +227,28 @@ function renderTdColumn (
         return null
       }
       if (rowspan > 1) {
-        attrs.rowspan = rowspan
+        tdAttrs.rowspan = rowspan
       }
       if (colspan > 1) {
-        attrs.colspan = colspan
+        tdAttrs.colspan = colspan
       }
     }
   } else if (spanMethod) {
     // 自定义合并行或列的方法
-    const { rowspan = 1, colspan = 1 } = spanMethod(params) || {}
+    const { rowspan = 1, colspan = 1 } = spanMethod(cellParams) || {}
     if (!rowspan || !colspan) {
       return null
     }
     if (rowspan > 1) {
-      attrs.rowspan = rowspan
+      tdAttrs.rowspan = rowspan
     }
     if (colspan > 1) {
-      attrs.colspan = colspan
+      tdAttrs.colspan = colspan
     }
   }
   // 如果被合并不可隐藏
   if (fixedHiddenColumn && mergeList) {
-    if (attrs.colspan > 1 || attrs.rowspan > 1) {
+    if (tdAttrs.colspan > 1 || tdAttrs.rowspan > 1) {
       fixedHiddenColumn = false
     }
   }
@@ -245,44 +256,84 @@ function renderTdColumn (
   if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
     isDirty = $xeTable.isUpdateByRow(row, column.field)
   }
+
+  const isVNAutoHeight = scrollYLoad && !hasEllipsis
+  let cellHeight = currCellHeight
+  const vnHeight = calcCellHeightFlag ? rowRest.height : 0
+  if (resizeHeight) {
+    cellHeight = resizeHeight
+  } else {
+    if (scrollYLoad) {
+      if (!hasEllipsis) {
+        cellHeight = vnHeight || currCellHeight
+      }
+    }
+  }
+
+  const isLastColumn = $columnIndex === columns.length - 1
+  const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
+
+  let isVNPreEmptyStatus = false
+  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
+  }
+
+  const tcStyle: Record<string, string> = {}
+  if (scrollYLoad || hasEllipsis || isCsHeight || isRsHeight) {
+    tcStyle.height = `${cellHeight}px`
+  } else {
+    tcStyle.minHeight = `${cellHeight}px`
+  }
+
   const tdVNs = []
-  if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
+  if (fixedHiddenColumn && isAllOverflow) {
     tdVNs.push(
       h('div', {
+        key: 'tc',
         class: ['vxe-cell', {
           'c--title': showTitle,
           'c--tooltip': showTooltip,
           'c--ellipsis': showEllipsis
         }],
-        style: {
-          maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-        }
+        style: tcStyle
       })
     )
   } else {
     // 渲染单元格
     tdVNs.push(
-      ...renderLine(h, _vm, params),
+      ...renderLine(h, _vm, cellParams, cellHeight),
       h('div', {
+        key: 'tc',
         class: ['vxe-cell', {
           'c--title': showTitle,
           'c--tooltip': showTooltip,
           'c--ellipsis': showEllipsis
         }],
-        style: {
-          maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-        },
+        style: tcStyle,
         attrs: {
           title: showTitle ? $xeTable.getCellLabel(row, column) : null
         }
-      }, column.renderCell(h, params))
+      }, isVNPreEmptyStatus
+        ? []
+        : [
+            h('div', {
+              attrs: {
+                colid,
+                rowid
+              },
+              class: 'vxe-cell--wrapper'
+            }, column.renderCell(h, cellParams))
+          ])
     )
     if (showValidTip && errorValidItem) {
       const errRule = errorValidItem.rule
       const validSlot = slots ? slots.valid : null
-      const validParams = { ...params, ...errorValidItem, rule: errorValidItem }
+      const validParams = { ...cellParams, ...errorValidItem, rule: errorValidItem }
       tdVNs.push(
         h('div', {
+          key: 'tcv',
           class: ['vxe-cell--valid-error-tip', getClass(validOpts.className, errorValidItem)],
           style: errRule && errRule.maxWidth
             ? {
@@ -305,54 +356,64 @@ function renderTdColumn (
       )
     }
   }
-  let cellHeight = ''
-  const vnHeight = isCalcCellHeight ? rest.height : 0
-  if (hasEllipsis) {
-    if (customRHeight) {
-      cellHeight = `${customRHeight}px`
-    } else if (!isAllOverflow) {
-      cellHeight = `${vnHeight || defaultRowHeight || 18}px`
-    }
-  } else {
-    cellHeight = `${vnHeight || defaultRowHeight || 18}px`
-  }
 
+  let showAreaRowStatus = false
   if (mouseConfig && mouseOpts.area && selectCellToRow) {
     if (
-      (!$columnIndex && selectCellToRow === true) ||
+      (!_columnIndex && selectCellToRow === true) ||
       (selectCellToRow === column.field)
     ) {
-      tdVNs.push(
-        h('div', {
-          class: 'vxe-cell--area-status'
-        })
-      )
+      showAreaRowStatus = true
     }
   }
-  const isLastColumn = $columnIndex === columns.length - 1
-  const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-  let isPreLoadStatus = false
-  if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex || _rowIndex > scrollYStore.visibleEndIndex)) {
-    isPreLoadStatus = true
-  } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-    isPreLoadStatus = true
+  if (!fixedHiddenColumn && showResizable && isAllColumnDrag) {
+    tdVNs.push(
+      h('div', {
+        key: 'tcc',
+        class: ['vxe-cell--col-resizable', {
+          'is--line': !border || border === 'none'
+        }],
+        on: {
+          mousedown: (evnt: MouseEvent) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+          dblclick: (evnt: MouseEvent) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
+        }
+      })
+    )
+  }
+
+  if ((rowResize || isAllRowDrag) && rowOpts.resizable) {
+    tdVNs.push(
+      h('div', {
+        key: 'tcr',
+        class: 'vxe-cell--row-resizable',
+        on: {
+          mousedown: (evnt: MouseEvent) => $xeTable.handleRowResizeMousedownEvent(evnt, cellParams),
+          dblclick: (evnt: MouseEvent) => $xeTable.handleRowResizeDblclickEvent(evnt, cellParams)
+        }
+      })
+    )
   }
 
   return h('td', {
     class: [
       'vxe-body--column',
-      column.id,
+      colid,
+      cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
+      cellAlign ? `col--${cellAlign}` : '',
+      type ? `col--${type}` : '',
       {
-        [`col--${cellAlign}`]: cellAlign,
-        [`col--vertical-${verticalAlign}`]: verticalAlign,
-        [`col--${type}`]: type,
         'col--last': isLastColumn,
         'col--tree-node': treeNode,
         'col--edit': isEdit,
         'col--ellipsis': hasEllipsis,
+        'col--cs-height': isCsHeight,
+        'col--rs-height': isRsHeight,
+        'col--to-row': showAreaRowStatus,
+        'col--auto-height': isVNAutoHeight,
         'fixed--width': !isAutoCellWidth,
         'fixed--hidden': fixedHiddenColumn,
+        'is--padding': isCellPadding,
         'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
         'is--drag-disabled': isDisabledDrag,
         'col--dirty': isDirty,
@@ -360,27 +421,25 @@ function renderTdColumn (
         'col--valid-error': !!errorValidItem,
         'col--current': currentColumn === column
       },
-      getClass(compCellClassName, params),
-      getClass(className, params),
-      getClass(allCellClassName, params)
+      getClass(compCellClassName, cellParams),
+      getClass(className, cellParams),
+      getClass(allCellClassName, cellParams)
     ],
     key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? column.id : $columnIndex,
-    attrs,
-    style: Object.assign({
-      height: cellHeight
-    }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle),
+    attrs: tdAttrs,
+    style: Object.assign({}, XEUtils.isFunction(compCellStyle) ? compCellStyle(cellParams) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(cellParams) : cellStyle),
     on: tdOns
-  }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : tdVNs)
+  }, isOptimizeMode && fixedHiddenColumn ? [] : tdVNs)
 }
 
-function renderRows (h: CreateElement, _vm: any, fixedType: VxeColumnPropTypes.Fixed, isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) {
+function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '', isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) {
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
   const tableReactData = $xeTable as unknown as TableReactData
   const tableInternalData = $xeTable as unknown as TableInternalData
 
-  const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps
-  const { hasFixedColumn, treeExpandedMaps, scrollXLoad, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData
+  const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
+  const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData
   const { fullAllDataRowIdData } = tableInternalData
   const checkboxOpts = $xeTable.computeCheckboxOpts
   const radioOpts = $xeTable.computeRadioOpts
@@ -466,7 +525,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: VxeColumnPropTypes.F
       return renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
     })
     rows.push(
-      columnOpts.drag && columnDragOpts.animation
+      !isColLoading && (columnOpts.drag && columnDragOpts.animation)
         ? h('transition-group', {
           props: {
             tag: 'tr',
@@ -502,7 +561,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: VxeColumnPropTypes.F
         cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`
       }
       const { showOverflow } = expandColumn
-      const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow
+      const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? isAllOverflow : showOverflow
       const expandParams = { $table: $xeTable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
       rows.push(
         h('tr', {
@@ -600,8 +659,8 @@ export default {
     const { xID, $scopedSlots } = $xeTable
     const { fixedColumn, fixedType, tableColumn } = props
 
-    const { showOverflow: allColumnOverflow, spanMethod, footerSpanMethod, mouseConfig } = tableProps
-    const { isGroup, tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData
+    const { spanMethod, footerSpanMethod, mouseConfig } = tableProps
+    const { isGroup, tableData, isRowLoading, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData
     const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData
     const rowOpts = $xeTable.computeRowOpts
     const emptyOpts = $xeTable.computeEmptyOpts
@@ -614,7 +673,7 @@ export default {
     let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
     let isOptimizeMode = false
     // 如果是使用优化模式
-    if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+    if (scrollXLoad || scrollYLoad || isAllOverflow) {
       if (expandColumn || spanMethod || footerSpanMethod) {
         // 如果不支持优化模式
       } else {
@@ -745,9 +804,9 @@ export default {
             })
           })),
           /**
-         * 内容
-         */
-          rowOpts.drag && rowDragOpts.animation
+           * 内容
+           */
+          !(isRowLoading || isColLoading) && (rowOpts.drag && rowDragOpts.animation)
             ? h('transition-group', {
               ref: 'refBodyTBody',
               props: {
@@ -793,6 +852,9 @@ export default {
             }),
             h('span', {
               class: 'vxe-table--cell-active-area'
+            }),
+            h('span', {
+              class: 'vxe-table--cell-row-status-area'
             })
           ])
           : renderEmptyElement($xeTable),

package/packages/table/src/cell.ts

@@ -6,7 +6,7 @@ import { updateCellTitle } from '../../ui/src/dom'
 import { createColumn, getRowid } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxeTableDefines, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeComponentSlotType, TableReactData, TableInternalData } from '../../../types'
+import type { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeComponentSlotType, TableReactData, TableInternalData } from '../../../types'
 
 const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI
 
@@ -170,7 +170,7 @@ function renderTitleContent (h: CreateElement, params: VxeTableDefines.CellRende
   const ons: Record<string, any> = {}
   if (showTitle || showTooltip || showAllTip) {
     ons.mouseenter = (evnt: MouseEvent) => {
-      if (tableReactData._isResize) {
+      if (tableReactData.isDragResize) {
         return
       }
       if (showTitle) {
@@ -182,7 +182,7 @@ function renderTitleContent (h: CreateElement, params: VxeTableDefines.CellRende
   }
   if (showTooltip || showAllTip) {
     ons.mouseleave = (evnt: any) => {
-      if (tableReactData._isResize) {
+      if (tableReactData.isDragResize) {
         return
       }
       if (showTooltip || showAllTip) {
@@ -206,25 +206,6 @@ function renderTitleContent (h: CreateElement, params: VxeTableDefines.CellRende
   ]
 }
 
-function formatFooterLabel (footerFormatter: VxeColumnPropTypes.FooterFormatter, params: {
-  itemValue: any
-  column: VxeTableDefines.ColumnInfo
-  row: any
-  items: any[]
-  _columnIndex: number
-}) {
-  if (XEUtils.isFunction(footerFormatter)) {
-    return `${footerFormatter(params)}`
-  }
-  const isArr = XEUtils.isArray(footerFormatter)
-  const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter)
-  const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null
-  if (footerFormatMethod) {
-    return `${isArr ? footerFormatMethod(params, ...footerFormatter.slice(1)) : footerFormatMethod(params)}`
-  }
-  return ''
-}
-
 function getFooterContent (h: CreateElement, params: VxeTableDefines.CellRenderFooterParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { $table, column, _columnIndex, row, items } = params
   const { slots, editRender, cellRender, footerFormatter } = column
@@ -232,40 +213,37 @@ function getFooterContent (h: CreateElement, params: VxeTableDefines.CellRenderF
   if (slots && slots.footer) {
     return $table.callSlot(slots.footer, params, h)
   }
+  let itemValue = ''
+  // 兼容老模式
+  if (XEUtils.isArray(items)) {
+    itemValue = items[_columnIndex]
+  } else {
+    itemValue = XEUtils.get(row, column.field)
+  }
+  const footParams = Object.assign(params, {
+    itemValue
+  })
+  if (footerFormatter) {
+    if (XEUtils.isFunction(footerFormatter)) {
+      return `${footerFormatter(footParams)}`
+    }
+    const isArr = XEUtils.isArray(footerFormatter)
+    const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter)
+    const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null
+    if (footerFormatMethod) {
+      return `${isArr ? footerFormatMethod(footParams, ...footerFormatter.slice(1)) : footerFormatMethod(footParams)}`
+    }
+    return ''
+  }
   if (renderOpts) {
     const compConf = renderer.get(renderOpts.name)
     const rtFooter = compConf ? (compConf.renderTableFooter || compConf.renderFooter) : null
     if (rtFooter) {
-      return getSlotVNs(rtFooter.call($table, h, renderOpts, params))
+      return getSlotVNs(rtFooter.call($table, h, renderOpts, footParams))
     }
   }
-  let itemValue = ''
-  // 兼容老模式
-  if (XEUtils.isArray(items)) {
-    itemValue = items[_columnIndex]
-    return [
-      footerFormatter
-        ? formatFooterLabel(footerFormatter, {
-          itemValue,
-          column,
-          row,
-          items,
-          _columnIndex
-        })
-        : formatText(itemValue, 1)
-    ]
-  }
-  itemValue = XEUtils.get(row, column.field)
   return [
-    footerFormatter
-      ? formatFooterLabel(footerFormatter, {
-        itemValue,
-        column,
-        row,
-        items,
-        _columnIndex
-      })
-      : formatText(itemValue, 1)
+    formatText(itemValue, 1)
   ]
 }
 
@@ -413,11 +391,7 @@ export const Cell = {
     return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params))
   },
   renderDefaultFooter (h: CreateElement, params: VxeTableDefines.CellRenderFooterParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
-    return [
-      h('span', {
-        class: 'vxe-cell--item'
-      }, getFooterContent(h, params))
-    ]
+    return getFooterContent(h, params)
   },
 
   /**
@@ -893,7 +867,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, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
+    const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
     if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
       return [
         h('span', {
@@ -906,12 +880,14 @@ export const Cell = {
             attrs: {
               title: getI18n('vxe.table.sortAsc')
             },
-            on: {
-              click (evnt: any) {
-                evnt.stopPropagation()
-                $table.triggerSortEvent(evnt, column, 'asc')
-              }
-            }
+            on: allowBtn
+              ? {
+                  click (evnt: any) {
+                    evnt.stopPropagation()
+                    $table.triggerSortEvent(evnt, column, 'asc')
+                  }
+                }
+              : undefined
           }),
           h('i', {
             class: ['vxe-sort--desc-btn', iconDesc || getIcon().TABLE_SORT_DESC, {
@@ -920,12 +896,14 @@ export const Cell = {
             attrs: {
               title: getI18n('vxe.table.sortDesc')
             },
-            on: {
-              click (evnt: any) {
-                evnt.stopPropagation()
-                $table.triggerSortEvent(evnt, column, 'desc')
-              }
-            }
+            on: allowBtn
+              ? {
+                  click (evnt: any) {
+                    evnt.stopPropagation()
+                    $table.triggerSortEvent(evnt, column, 'desc')
+                  }
+                }
+              : undefined
           })
         ])
       ]