vxe-table 4.10.6-beta.8 → 4.10.6

package/packages/table/src/body.ts

@@ -6,7 +6,7 @@ import { updateCellTitle, getPropClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableDefines, VxeTableMethods, VxeComponentSlotType, VxeColumnPropTypes } from '../../../types'
+import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableDefines, VxeComponentSlotType } from '../../../types'
 
 const { getI18n, renderer, renderEmptyElement } = VxeUI
 
@@ -24,10 +24,10 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
+    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeLeftFixedWidth, computeRightFixedWidth } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeLeftFixedWidth, computeRightFixedWidth, computeResizableOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyScroll = ref() as Ref<HTMLDivElement>
@@ -41,11 +41,11 @@ export default defineComponent({
     // 滚动、拖动过程中不需要触发
     const isVMScrollProcess = () => {
       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)))
     }
 
-    const renderLine = (params: VxeTableDefines.CellRenderBodyParams) => {
+    const renderLine = (params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) => {
       const { row, column } = params
       const { afterFullData } = tableInternalData
       const { treeConfig } = tableProps
@@ -67,12 +67,14 @@ export default defineComponent({
       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`
               }
             })
@@ -88,7 +90,7 @@ export default defineComponent({
     const renderTdColumn = (
       seq: number | string,
       rowid: string,
-      fixedType: VxeColumnPropTypes.Fixed,
+      fixedType: 'left' | 'right' | '',
       isOptimizeMode: boolean,
       rowLevel: number,
       row: any,
@@ -101,26 +103,30 @@ export default defineComponent({
       items: any[]
     ) => {
       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 = computeCellOpts.value
       const validOpts = computeValidOpts.value
       const checkboxOpts = computeCheckboxOpts.value
       const editOpts = computeEditOpts.value
       const tooltipOpts = computeTooltipOpts.value
+      const resizableOpts = computeResizableOpts.value
+      const { isAllColumnDrag, isAllRowDrag } = resizableOpts
       const rowOpts = computeRowOpts.value
       const rowDragOpts = computeRowDragOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
+      const customCellHeight = cellOpts.height || rowOpts.height
+      const currCellHeight = customCellHeight || defaultRowHeight
       const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = rowDragOpts
       const columnOpts = computeColumnOpts.value
       const mouseOpts = computeMouseOpts.value
       const areaOpts = computeAreaOpts.value
       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
@@ -130,21 +136,27 @@ export default defineComponent({
       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,
@@ -172,7 +184,7 @@ export default defineComponent({
         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) {
@@ -184,9 +196,9 @@ export default defineComponent({
             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 退出事件
@@ -198,13 +210,13 @@ export default defineComponent({
           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.onMousedown = (evnt: MouseEvent) => {
-          $xeTable.triggerCellMousedownEvent(evnt, params)
+          $xeTable.triggerCellMousedownEvent(evnt, cellParams)
         }
       }
       // 拖拽列事件
@@ -213,11 +225,11 @@ export default defineComponent({
       }
       // 点击事件处理
       tdOns.onClick = (evnt: MouseEvent) => {
-        $xeTable.triggerCellClickEvent(evnt, params)
+        $xeTable.triggerCellClickEvent(evnt, cellParams)
       }
       // 双击事件处理
       tdOns.onDblclick = (evnt: MouseEvent) => {
-        $xeTable.triggerCellDblclickEvent(evnt, params)
+        $xeTable.triggerCellDblclickEvent(evnt, cellParams)
       }
       // 合并行或列
       if (mergeList.length) {
@@ -228,28 +240,28 @@ export default defineComponent({
             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
         }
       }
@@ -257,42 +269,80 @@ export default defineComponent({
       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: any[] = []
-      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(params),
+          ...renderLine(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,
             title: showTitle ? $xeTable.getCellLabel(row, column) : null
-          }, column.renderCell(params))
+          }, isVNPreEmptyStatus
+            ? []
+            : [
+                h('div', {
+                  colid,
+                  rowid,
+                  class: 'vxe-cell--wrapper'
+                }, column.renderCell(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', getPropClass(validOpts.className, validParams)],
               style: errRule && errRule.maxWidth
                 ? {
@@ -315,54 +365,60 @@ export default defineComponent({
           )
         }
       }
-      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'
+            }],
+            onMousedown: (evnt: MouseEvent) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+            onDblclick: (evnt: MouseEvent) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
+          })
+        )
+      }
+
+      if ((rowResize || isAllRowDrag) && rowOpts.resizable) {
+        tdVNs.push(
+          h('div', {
+            key: 'tcr',
+            class: 'vxe-cell--row-resizable',
+            onMousedown: (evnt: MouseEvent) => $xeTable.handleRowResizeMousedownEvent(evnt, cellParams),
+            onDblclick: (evnt: MouseEvent) => $xeTable.handleRowResizeDblclickEvent(evnt, cellParams)
+          })
+        )
       }
 
       return h('td', {
         class: [
           'vxe-body--column',
           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,
@@ -370,22 +426,20 @@ export default defineComponent({
             'col--valid-error': !!errorValidItem,
             'col--current': currentColumn === column
           },
-          getPropClass(compCellClassName, params),
-          getPropClass(className, params),
-          getPropClass(allCellClassName, params)
+          getPropClass(compCellClassName, cellParams),
+          getPropClass(className, cellParams),
+          getPropClass(allCellClassName, cellParams)
         ],
         key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
-        ...attrs,
-        style: Object.assign({
-          height: cellHeight
-        }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle),
+        ...tdAttrs,
+        style: Object.assign({}, XEUtils.isFunction(compCellStyle) ? compCellStyle(cellParams) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(cellParams) : cellStyle),
         ...tdOns
-      }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : tdVNs)
+      }, isOptimizeMode && fixedHiddenColumn ? [] : tdVNs)
     }
 
-    const renderRows = (fixedType: VxeColumnPropTypes.Fixed, isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) => {
-      const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedMaps, scrollXLoad, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData
+    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 } = tableReactData
       const { fullAllDataRowIdData } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
@@ -470,7 +524,7 @@ export default defineComponent({
           return renderTdColumn(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(TransitionGroup, {
               name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
               tag: 'tr',
@@ -502,7 +556,7 @@ export default defineComponent({
             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', {
@@ -576,8 +630,8 @@ export default defineComponent({
       const { slots } = tableContext
 
       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 = computeRowOpts.value
       const emptyOpts = computeEmptyOpts.value
@@ -590,7 +644,7 @@ export default defineComponent({
       let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
       let isOptimizeMode = false
       // 如果是使用优化模式
-      if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+      if (scrollXLoad || scrollYLoad || isAllOverflow) {
         if (expandColumn || spanMethod || footerSpanMethod) {
           // 如果不支持优化模式
         } else {
@@ -704,21 +758,21 @@ export default defineComponent({
             cellpadding: 0,
             border: 0
           }, [
-          /**
-           * 列宽
-           */
+            /**
+             * 列宽
+             */
             h('colgroup', {
               ref: refBodyColgroup
-            }, (renderColumnList as any[]).map((column, $columnIndex) => {
+            }, renderColumnList.map((column, $columnIndex) => {
               return h('col', {
                 name: column.id,
                 key: $columnIndex
               })
             })),
             /**
-           * 内容
-           */
-            rowOpts.drag && rowDragOpts.animation
+             * 内容
+             */
+            !(isRowLoading || isColLoading) && (rowOpts.drag && rowDragOpts.animation)
               ? h(TransitionGroup, {
                 ref: refBodyTBody,
                 name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
@@ -762,6 +816,9 @@ export default defineComponent({
               }),
               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 { VxeTableConstructor, VxeTableDefines, VxeColumnPropTypes, VxeTablePrivateMethods, VxeComponentSlotType } from '../../../types'
+import type { VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, VxeComponentSlotType } from '../../../types'
 
 const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI
 
@@ -173,7 +173,7 @@ function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams & {
   const ons: Record<string, any> = {}
   if (showTitle || showTooltip || showAllTip) {
     ons.onMouseenter = (evnt: MouseEvent) => {
-      if (tableReactData._isResize) {
+      if (tableReactData.isDragResize) {
         return
       }
       if (showTitle) {
@@ -185,7 +185,7 @@ function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams & {
   }
   if (showTooltip || showAllTip) {
     ons.onMouseleave = (evnt: MouseEvent) => {
-      if (tableReactData._isResize) {
+      if (tableReactData.isDragResize) {
         return
       }
       if (showTooltip || showAllTip) {
@@ -207,25 +207,6 @@ function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams & {
   ]
 }
 
-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 (params: VxeTableDefines.CellRenderFooterParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { $table, column, _columnIndex, items, row } = params
   const { slots, editRender, cellRender, footerFormatter } = column
@@ -234,42 +215,39 @@ function getFooterContent (params: VxeTableDefines.CellRenderFooterParams & { $t
   if (footerSlot) {
     return $table.callSlot(footerSlot, params)
   }
+  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)
     if (compConf) {
       const rtFooter = compConf.renderTableFooter || compConf.renderFooter
       if (rtFooter) {
-        return getSlotVNs(rtFooter(renderOpts, params))
+        return getSlotVNs(rtFooter(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)
   ]
 }
 
@@ -425,11 +403,7 @@ export const Cell = {
     return Cell.renderTreeIcon(params, Cell.renderDefaultCell(params) as VNode[])
   },
   renderDefaultFooter (params: VxeTableDefines.CellRenderFooterParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
-    return [
-      h('span', {
-        class: 'vxe-cell--item'
-      }, getFooterContent(params))
-    ]
+    return getFooterContent(params)
   },
 
   /**
@@ -911,7 +885,7 @@ export const Cell = {
     const { $table, column } = params
     const { computeSortOpts } = $table.getComputeMaps()
     const sortOpts = computeSortOpts.value
-    const { showIcon, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
+    const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
     const { order } = column
     if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
       return [
@@ -923,20 +897,24 @@ export const Cell = {
               'sort--active': order === 'asc'
             }],
             title: getI18n('vxe.table.sortAsc'),
-            onClick (evnt: Event) {
-              evnt.stopPropagation()
-              $table.triggerSortEvent(evnt, column, 'asc')
-            }
+            onClick: allowBtn
+              ? (evnt: Event) => {
+                  evnt.stopPropagation()
+                  $table.triggerSortEvent(evnt, column, 'asc')
+                }
+              : undefined
           }),
           h('i', {
             class: ['vxe-sort--desc-btn', iconDesc || getIcon().TABLE_SORT_DESC, {
               'sort--active': order === 'desc'
             }],
             title: getI18n('vxe.table.sortDesc'),
-            onClick (evnt: Event) {
-              evnt.stopPropagation()
-              $table.triggerSortEvent(evnt, column, 'desc')
-            }
+            onClick: allowBtn
+              ? (evnt: Event) => {
+                  evnt.stopPropagation()
+                  $table.triggerSortEvent(evnt, column, 'desc')
+                }
+              : undefined
           })
         ])
       ]