vxe-table 4.10.6-beta.8 → 4.10.6

package/packages/table/src/column.ts

@@ -57,6 +57,16 @@ export const columnProps = {
   formatter: [Function, Array, String] as PropType<VxeColumnPropTypes.Formatter<any>>,
   // 格式化表尾显示内容
   footerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.FooterFormatter>,
+  // 是否显示间距
+  padding: {
+    type: Boolean as PropType<VxeColumnPropTypes.Padding>,
+    default: null
+  },
+  // 垂直对齐方式
+  verticalAlign: {
+    type: String as PropType<VxeColumnPropTypes.VerticalAlign>,
+    default: null
+  },
   // 是否允许排序
   sortable: Boolean as PropType<VxeColumnPropTypes.Sortable>,
   // 自定义排序的属性
@@ -83,8 +93,10 @@ export const columnProps = {
   filterRender: Object as PropType<VxeColumnPropTypes.FilterRender>,
   // 设置为树节点
   treeNode: Boolean as PropType<VxeColumnPropTypes.TreeNode>,
-  // 指定为树节点
+  // 设置为拖拽排序
   dragSort: Boolean as PropType<VxeColumnPropTypes.DragSort>,
+  // 设置为行高拖拽
+  rowResize: Boolean as PropType<VxeColumnPropTypes.RowResize>,
   // 是否可视
   visible: {
     type: Boolean as PropType<VxeColumnPropTypes.Visible>,

package/packages/table/src/columnInfo.ts

@@ -74,6 +74,8 @@ export class ColumnInfo {
       footerClassName: _vm.footerClassName,
       formatter: formatter,
       footerFormatter: _vm.footerFormatter,
+      padding: _vm.padding,
+      verticalAlign: _vm.verticalAlign,
       sortable: _vm.sortable,
       sortBy: _vm.sortBy,
       sortType: _vm.sortType,
@@ -85,6 +87,7 @@ export class ColumnInfo {
       filterRender: _vm.filterRender,
       treeNode: _vm.treeNode,
       dragSort: _vm.dragSort,
+      rowResize: _vm.rowResize,
       cellType: _vm.cellType,
       cellRender: _vm.cellRender,
       editRender: _vm.editRender,

package/packages/table/src/emits.ts

@@ -36,7 +36,11 @@ export default [
   'filter-change',
   'filter-visible',
   'clear-filter',
-  'resizable-change',
+
+  'resizable-change', // 废弃
+
+  'column-resizable-change',
+  'row-resizable-change',
   'toggle-row-expand',
   'toggle-tree-expand',
   'menu-click',

package/packages/table/src/footer.ts

@@ -2,6 +2,7 @@ import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTi
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { updateCellTitle, getPropClass } from '../../ui/src/dom'
+import { getCellHeight } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines } from '../../../types'
 
@@ -47,7 +48,7 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts } = $xeTable.getComputeMaps()
+    const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refFooterScroll = ref() as Ref<HTMLDivElement>
@@ -58,31 +59,42 @@ export default defineComponent({
 
     const renderRows = (tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) => {
       const { fixedType } = props
-      const { footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
+      const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
       const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFooterList } = tableReactData
       const { scrollXStore } = tableInternalData
       const tooltipOpts = computeTooltipOpts.value
+      const resizableOpts = computeResizableOpts.value
+      const { isAllColumnDrag } = resizableOpts
       const columnOpts = computeColumnOpts.value
+      const defaultRowHeight = computeDefaultRowHeight.value
+      const cellOpts = computeCellOpts.value
+      const footerCellOpts = computeFooterCellOpts.value
+      const currCellHeight = getCellHeight(footerCellOpts.height || cellOpts.height) || defaultRowHeight
 
       return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
+        const colid = column.id
         const renderOpts = editRender || cellRender
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null
         const showAllTip = tooltipOpts.showAll
         const isColGroup = column.children && column.children.length
         const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX
+        const isPadding = XEUtils.isBoolean(footerCellOpts.padding) ? footerCellOpts.padding : cellOpts.padding
         const footOverflow = XEUtils.eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow
         const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
         let showEllipsis = footOverflow === 'ellipsis'
         const showTitle = footOverflow === 'title'
         const showTooltip = footOverflow === true || footOverflow === 'tooltip'
         let hasEllipsis = showTitle || showTooltip || showEllipsis
-        const attrs: any = { colid: column.id }
+        const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
+        const attrs: any = { colid }
         const tfOns: any = {}
         const columnIndex = $xeTable.getColumnIndex(column)
         const _columnIndex = $xeTable.getVTColumnIndex(column)
         const itemIndex = _columnIndex
-        const cellParams: VxeTableDefines.CellRenderFooterParams = {
+        const cellParams: VxeTableDefines.CellRenderFooterParams & {
+          $table: VxeTableConstructor<any> & VxeTablePrivateMethods
+        } = {
           $table: $xeTable,
           $grid: $xeTable.xegrid,
           row,
@@ -156,9 +168,16 @@ export default defineComponent({
         const isLastColumn = $columnIndex === tableColumn.length - 1
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-        let isPreLoadStatus = false
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true
+        let isVNPreEmptyStatus = false
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true
+        }
+
+        const tcStyle: Record<string, string> = {}
+        if (hasEllipsis) {
+          tcStyle.height = `${currCellHeight}px`
+        } else {
+          tcStyle.minHeight = `${currCellHeight}px`
         }
 
         return h('td', {
@@ -168,6 +187,7 @@ export default defineComponent({
             'col--last': isLastColumn,
             'fixed--width': !isAutoCellWidth,
             'fixed--hidden': fixedHiddenColumn,
+            'is--padding': isPadding,
             'col--ellipsis': hasEllipsis,
             'col--current': currentColumn === column
           }, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)],
@@ -181,8 +201,28 @@ export default defineComponent({
               'c--title': showTitle,
               'c--tooltip': showTooltip,
               'c--ellipsis': showEllipsis
-            }]
-          }, isPreLoadStatus ? [] : column.renderFooter(cellParams))
+            }],
+            style: tcStyle
+          }, isVNPreEmptyStatus
+            ? []
+            : [
+                h('div', {
+                  colid,
+                  class: 'vxe-cell--wrapper'
+                }, column.renderFooter(cellParams))
+              ]),
+          /**
+           * 列宽拖动
+           */
+          !fixedHiddenColumn && showResizable && isAllColumnDrag
+            ? h('div', {
+              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)
+            })
+            : renderEmptyElement($xeTable)
         ])
       })
     }
@@ -190,7 +230,7 @@ export default defineComponent({
     const renderHeads = (renderColumnList: VxeTableDefines.ColumnInfo[]) => {
       const { fixedType, footerTableData } = props
       const { footerRowClassName, footerRowStyle } = tableProps
-      const { isDragColMove } = tableReactData
+      const { isColLoading, isDragColMove } = tableReactData
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
 
@@ -198,7 +238,7 @@ export default defineComponent({
         const _rowIndex = $rowIndex
         const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (columnOpts.drag && columnDragOpts.animation) {
+        if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
           return h(TransitionGroup, {
             key: $rowIndex,
             name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,

package/packages/table/src/header.ts

@@ -1,12 +1,11 @@
 import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { convertHeaderColumnToRows, getColReMinWidth, getRefElem } from './util'
-import { hasClass, getOffsetPos, addClass, removeClass } from '../../ui/src/dom'
+import { getCellHeight, convertHeaderColumnToRows } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines, VxeColumnPropTypes } from '../../../types'
 
-const { getI18n, renderer, renderEmptyElement } = VxeUI
+const { renderer, renderEmptyElement } = VxeUI
 
 const renderType = 'header'
 
@@ -26,8 +25,7 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { refElem: tableRefElem, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip } = $xeTable.getRefMaps()
-    const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts, computeScrollbarXToTop } = $xeTable.getComputeMaps()
+    const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
 
     const headerColumn = ref([] as VxeTableDefines.ColumnInfo[][])
 
@@ -44,141 +42,6 @@ export default defineComponent({
       headerColumn.value = isGroup ? convertHeaderColumnToRows(props.tableGroupColumn) : []
     }
 
-    const resizeMousedownEvent = (evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) => {
-      const { column } = params
-      const { fixedType } = props
-      const { scrollbarHeight } = tableReactData
-      const { elemStore, visibleColumn } = tableInternalData
-      const resizableOpts = computeResizableOpts.value
-      const tableEl = tableRefElem.value
-      const leftContainerElem = refLeftContainer.value
-      const rightContainerElem = refRightContainer.value
-      const resizeBarElem = refCellResizeBar.value
-      const resizeTipElem = refCellResizeTip.value
-      const scrollbarXToTop = computeScrollbarXToTop.value
-      const { clientX: dragClientX } = evnt
-      const wrapperElem = refElem.value
-      const dragBtnElem = evnt.target as HTMLDivElement
-      let resizeColumn = column
-      if (column.children && column.children.length) {
-        XEUtils.eachTree(column.children, childColumn => {
-          resizeColumn = childColumn
-        })
-      }
-      const cell = dragBtnElem.parentNode as HTMLTableCellElement
-      const cellParams = Object.assign(params, { cell })
-      let dragLeft = 0
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      if (!bodyScrollElem) {
-        return
-      }
-      const pos = getOffsetPos(dragBtnElem, wrapperElem)
-      const dragBtnWidth = dragBtnElem.clientWidth
-      const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2)
-      const minInterval = getColReMinWidth(cellParams) - dragBtnOffsetWidth // 列之间的最小间距
-      let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval
-      let dragPosLeft = pos.left + dragBtnOffsetWidth
-      const domMousemove = document.onmousemove
-      const domMouseup = document.onmouseup
-      const isLeftFixed = fixedType === 'left'
-      const isRightFixed = fixedType === 'right'
-
-      // 计算左右侧固定列偏移量
-      let fixedOffsetWidth = 0
-      if (isLeftFixed || isRightFixed) {
-        const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling'
-        let tempCellElem = cell[siblingProp] as HTMLTableCellElement
-        while (tempCellElem) {
-          if (hasClass(tempCellElem, 'fixed--hidden')) {
-            break
-          } else if (!hasClass(tempCellElem, 'col--group')) {
-            fixedOffsetWidth += tempCellElem.offsetWidth
-          }
-          tempCellElem = tempCellElem[siblingProp] as HTMLTableCellElement
-        }
-        if (isRightFixed && rightContainerElem) {
-          dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth
-        }
-      }
-
-      // 处理拖动事件
-      const updateEvent = (evnt: MouseEvent) => {
-        evnt.stopPropagation()
-        evnt.preventDefault()
-        const tableHeight = tableEl.clientHeight
-        const offsetX = evnt.clientX - dragClientX
-        let left = dragPosLeft + offsetX
-        const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft
-        if (isLeftFixed) {
-          // 左固定列（不允许超过右侧固定列、不允许超过右边距）
-          left = Math.min(left, (rightContainerElem ? rightContainerElem.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval)
-        } else if (isRightFixed) {
-          // 右侧固定列（不允许超过左侧固定列、不允许超过左边距）
-          dragMinLeft = (leftContainerElem ? leftContainerElem.clientWidth : 0) + fixedOffsetWidth + minInterval
-          left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval)
-        } else {
-          dragMinLeft = Math.max(bodyScrollElem.scrollLeft, dragMinLeft)
-          // left = Math.min(left, bodyScrollElem.clientWidth + bodyScrollElem.scrollLeft - 40)
-        }
-        dragLeft = Math.max(left, dragMinLeft)
-        const resizeBarLeft = Math.max(1, dragLeft - scrollLeft)
-        resizeBarElem.style.left = `${resizeBarLeft}px`
-        resizeBarElem.style.top = `${scrollbarXToTop ? scrollbarHeight : 0}px`
-        resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - scrollbarHeight : tableHeight}px`
-        if (resizableOpts.showDragTip && resizeTipElem) {
-          const tableWidth = tableEl.clientWidth
-          const wrapperRect = wrapperElem.getBoundingClientRect()
-          const resizeBarWidth = resizeBarElem.clientWidth
-          const resizeTipWidth = resizeTipElem.clientWidth
-          const resizeTipHeight = resizeTipElem.clientHeight
-          let resizeTipLeft = -resizeTipWidth
-          if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
-            resizeTipLeft = 0
-          } else if (resizeBarLeft > tableWidth) {
-            resizeTipLeft += tableWidth - resizeBarLeft
-          }
-          resizeTipElem.style.left = `${resizeTipLeft}px`
-          resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
-          resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)])
-        }
-      }
-
-      tableReactData._isResize = true
-      addClass(tableEl, 'drag--resize')
-      resizeBarElem.style.display = 'block'
-      document.onmousemove = updateEvent
-      document.onmouseup = function (evnt) {
-        document.onmousemove = domMousemove
-        document.onmouseup = domMouseup
-        const resizeWidth = resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
-        resizeColumn.resizeWidth = resizeWidth
-        if (resizableOpts.dragMode === 'fixed') {
-          visibleColumn.forEach(item => {
-            if (item.id !== resizeColumn.id) {
-              if (!item.resizeWidth) {
-                item.resizeWidth = item.renderWidth
-              }
-            }
-          })
-        }
-        resizeBarElem.style.display = 'none'
-        tableReactData._isResize = false
-        tableInternalData._lastResizeTime = Date.now()
-        $xeTable.analyColumnWidth()
-        $xeTable.recalculate(true).then(() => {
-          $xeTable.saveCustomStore('update:visible')
-          $xeTable.updateCellAreas()
-          $xeTable.dispatchEvent('resizable-change', { ...params, resizeWidth }, evnt)
-          setTimeout(() => $xeTable.recalculate(true), 300)
-        })
-        removeClass(tableEl, 'drag--resize')
-      }
-      updateEvent(evnt)
-      if ($xeTable.closeMenu) {
-        $xeTable.closeMenu()
-      }
-    }
-
     const renderRows = (isGroup: boolean, isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
       const { fixedType } = props
       const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
@@ -186,6 +49,10 @@ export default defineComponent({
       const { scrollXStore } = tableInternalData
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
+      const cellOpts = computeCellOpts.value
+      const defaultRowHeight = computeDefaultRowHeight.value
+      const headerCellOpts = computeHeaderCellOpts.value
+      const currCellHeight = getCellHeight(headerCellOpts.height || cellOpts.height) || defaultRowHeight
       const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
       return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column
@@ -194,6 +61,7 @@ export default defineComponent({
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null
         const isColGroup = column.children && column.children.length
         const fixedHiddenColumn = fixedType ? (column.fixed !== fixedType && !isColGroup) : !!column.fixed && overflowX
+        const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding
         const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
         const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
         let showEllipsis = headOverflow === 'ellipsis'
@@ -208,7 +76,7 @@ export default defineComponent({
         }
         const columnIndex = $xeTable.getColumnIndex(column)
         const _columnIndex = $xeTable.getVTColumnIndex(column)
-        const params: VxeTableDefines.CellRenderHeaderParams & {
+        const cellParams: VxeTableDefines.CellRenderHeaderParams & {
           $table: VxeTableConstructor & VxeTablePrivateMethods
         } = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter }
         const thAttrs: Record<string, string | number | null> = {
@@ -217,8 +85,8 @@ export default defineComponent({
           rowspan: column.rowSpan > 1 ? column.rowSpan : null
         }
         const thOns: any = {
-          onClick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
-          onDblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+          onClick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
+          onDblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
         }
         // 横向虚拟滚动不支持动态行高
         if (scrollXLoad && !hasEllipsis) {
@@ -227,11 +95,11 @@ export default defineComponent({
         const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell'
         let isDisabledDrag = false
         if (isColDragCell) {
-          isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params))
+          isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(cellParams))
         }
         // 按下事件处理
         if (mouseConfig || isColDragCell) {
-          thOns.onMousedown = (evnt: MouseEvent) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params)
+          thOns.onMousedown = (evnt: MouseEvent) => $xeTable.triggerHeaderCellMousedownEvent(evnt, cellParams)
         }
         // 拖拽列事件
         if (columnOpts.drag) {
@@ -246,9 +114,16 @@ export default defineComponent({
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-        let isPreLoadStatus = false
-        if (scrollXLoad && !isGroup && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true
+        let isVNPreEmptyStatus = false
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true
+        }
+
+        const tcStyle: Record<string, string> = {}
+        if (hasEllipsis) {
+          tcStyle.height = `${currCellHeight}px`
+        } else {
+          tcStyle.minHeight = `${currCellHeight}px`
         }
 
         return h('th', {
@@ -261,6 +136,7 @@ export default defineComponent({
             'col--ellipsis': hasEllipsis,
             'fixed--width': !isAutoCellWidth,
             'fixed--hidden': fixedHiddenColumn,
+            'is--padding': isPadding,
             'is--sortable': column.sortable,
             'col--filter': !!filters,
             'is--filter-active': hasFilter,
@@ -268,10 +144,10 @@ export default defineComponent({
             'is--drag-disabled': isDisabledDrag,
             'col--current': currentColumn === column
           },
-          headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(params) : headerClassName) : '',
-          headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName) : ''
+          headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName) : '',
+          headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(cellParams) : headerCellClassName) : ''
           ],
-          style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
+          style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : null,
           ...thAttrs,
           ...thOns,
           key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
@@ -281,18 +157,26 @@ export default defineComponent({
               'c--title': showTitle,
               'c--tooltip': showTooltip,
               'c--ellipsis': showEllipsis
-            }]
-          }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(params)),
+            }],
+            style: tcStyle
+          }, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn)
+            ? []
+            : [
+                h('div', {
+                  colid,
+                  class: 'vxe-cell--wrapper'
+                }, column.renderHeader(cellParams))
+              ]),
           /**
            * 列宽拖动
            */
           !fixedHiddenColumn && showResizable
             ? h('div', {
-              class: ['vxe-resizable', {
+              class: ['vxe-cell--col-resizable', {
                 'is--line': !border || border === 'none'
               }],
-              onMousedown: (evnt: MouseEvent) => resizeMousedownEvent(evnt, params),
-              onDblclick: (evnt: MouseEvent) => $xeTable.handleResizeDblclickEvent(evnt, params)
+              onMousedown: (evnt: MouseEvent) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+              onDblclick: (evnt: MouseEvent) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
             })
             : renderEmptyElement($xeTable)
         ])
@@ -302,14 +186,14 @@ export default defineComponent({
     const renderHeads = (isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][]) => {
       const { fixedType } = props
       const { headerRowClassName, headerRowStyle } = tableProps
-      const { isDragColMove } = tableReactData
+      const { isColLoading, isDragColMove } = tableReactData
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
 
       return headerGroups.map((cols, $rowIndex) => {
         const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (columnOpts.drag && columnDragOpts.animation) {
+        if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
           return h(TransitionGroup, {
             key: $rowIndex,
             name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
@@ -336,10 +220,11 @@ export default defineComponent({
 
     const renderVN = () => {
       const { fixedType, fixedColumn, tableColumn } = props
-      const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
+      const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
       const { isGroup, scrollXLoad, scrollYLoad, dragCol } = tableReactData
       const { visibleColumn, fullColumnIdData } = tableInternalData
 
+      const mouseOpts = computeMouseOpts.value
       let renderHeaderList = headerColumn.value
       let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
       let isOptimizeMode = false
@@ -436,15 +321,32 @@ export default defineComponent({
             h('thead', {
               ref: refHeaderTHead
             }, renderHeads(isGroup, isOptimizeMode, renderHeaderList))
-          ])
-        ]),
-        /**
-         * 其他
-         */
-        h('div', {
-          ref: refHeaderBorderRepair,
-          class: 'vxe-table--header-border-line'
-        })
+          ]),
+          mouseConfig && mouseOpts.area
+            ? h('div', {
+              class: 'vxe-table--cell-area'
+            }, [
+              h('span', {
+                class: 'vxe-table--cell-main-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-copy-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-extend-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-multi-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-active-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-col-status-area'
+              })
+            ])
+            : renderEmptyElement($xeTable)
+        ])
       ])
     }
 

package/packages/table/src/props.ts

@@ -34,10 +34,10 @@ export default {
     type: [Boolean, String] as PropType<VxeTablePropTypes.Border>,
     default: () => getConfig().table.border
   },
-  // 单元格是否有边距
+  // 已废弃，被 cell-config.padding 替换
   padding: {
     type: Boolean as PropType<VxeTablePropTypes.Padding>,
-    default: () => getConfig().table.padding
+    default: null
   },
   // 是否圆角边框
   round: {
@@ -86,13 +86,18 @@ export default {
     type: Boolean as PropType<VxeTablePropTypes.HighlightHoverRow>,
     default: () => getConfig().table.highlightHoverRow
   },
-  // （即将废弃）是否要高亮当前选中列
-
+  /**
+   * （即将废弃）是否要高亮当前选中列
+   * @deprecated
+   */
   highlightCurrentColumn: {
     type: Boolean as PropType<VxeTablePropTypes.HighlightCurrentColumn>,
     default: () => getConfig().table.highlightCurrentColumn
   },
-  // （即将废弃）鼠标移到列是否要高亮显示
+  /**
+   * （即将废弃）鼠标移到列是否要高亮显示
+   * @deprecated
+   */
   highlightHoverColumn: {
     type: Boolean as PropType<VxeTablePropTypes.HighlightHoverColumn>,
     default: () => getConfig().table.highlightHoverColumn
@@ -185,6 +190,10 @@ export default {
   columnConfig: Object as PropType<VxeTablePropTypes.ColumnConfig>,
   // 单元格配置信息
   cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
+  // 表头单元格配置信息
+  headerCellConfig: Object as PropType<VxeTablePropTypes.HeaderCellConfig>,
+  // 表尾单元格配置信息
+  footerCellConfig: Object as PropType<VxeTablePropTypes.FooterCellConfig>,
   // 行配置信息
   rowConfig: Object as PropType<VxeTablePropTypes.RowConfig>,
   // 已废弃，被 rowDragConfig 替换