vxe-table 4.10.6-beta.8 → 4.10.6

package/es/table/src/footer.js

@@ -2,6 +2,7 @@ import { defineComponent, TransitionGroup, h, ref, inject, nextTick, onMounted,
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { updateCellTitle, getPropClass } from '../../ui/src/dom';
+import { getCellHeight } from './util';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'footer';
 function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
@@ -40,7 +41,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         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();
         const refFooterScroll = ref();
         const refFooterTable = ref();
@@ -49,25 +50,34 @@ export default defineComponent({
         const refFooterXSpace = ref();
         const renderRows = (tableColumn, footerTableData, row, $rowIndex, _rowIndex) => {
             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 = { colid: column.id };
+                const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
+                const attrs = { colid };
                 const tfOns = {};
                 const columnIndex = $xeTable.getColumnIndex(column);
                 const _columnIndex = $xeTable.getVTColumnIndex(column);
@@ -147,9 +157,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 = {};
+                if (hasEllipsis) {
+                    tcStyle.height = `${currCellHeight}px`;
+                }
+                else {
+                    tcStyle.minHeight = `${currCellHeight}px`;
                 }
                 return h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-footer--column', column.id, {
                             [`col--${footAlign}`]: footAlign,
@@ -157,6 +174,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)] }, attrs), { style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null }), tfOns), { key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag ? column.id : $columnIndex }), [
@@ -165,21 +183,41 @@ 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) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+                            onDblclick: (evnt) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
+                        })
+                        : renderEmptyElement($xeTable)
                 ]);
             });
         };
         const renderHeads = (renderColumnList) => {
             const { fixedType, footerTableData } = props;
             const { footerRowClassName, footerRowStyle } = tableProps;
-            const { isDragColMove } = tableReactData;
+            const { isColLoading, isDragColMove } = tableReactData;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
             return footerTableData.map((row, $rowIndex) => {
                 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/es/table/src/header.js

@@ -1,9 +1,8 @@
 import { defineComponent, TransitionGroup, h, ref, 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';
-const { getI18n, renderer, renderEmptyElement } = VxeUI;
+import { getCellHeight, convertHeaderColumnToRows } from './util';
+const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'header';
 export default defineComponent({
     name: 'VxeTableHeader',
@@ -20,8 +19,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         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([]);
         const refElem = ref();
         const refHeaderScroll = ref();
@@ -34,141 +32,6 @@ export default defineComponent({
             const { isGroup } = tableReactData;
             headerColumn.value = isGroup ? convertHeaderColumnToRows(props.tableGroupColumn) : [];
         };
-        const resizeMousedownEvent = (evnt, params) => {
-            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;
-            let resizeColumn = column;
-            if (column.children && column.children.length) {
-                XEUtils.eachTree(column.children, childColumn => {
-                    resizeColumn = childColumn;
-                });
-            }
-            const cell = dragBtnElem.parentNode;
-            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];
-                while (tempCellElem) {
-                    if (hasClass(tempCellElem, 'fixed--hidden')) {
-                        break;
-                    }
-                    else if (!hasClass(tempCellElem, 'col--group')) {
-                        fixedOffsetWidth += tempCellElem.offsetWidth;
-                    }
-                    tempCellElem = tempCellElem[siblingProp];
-                }
-                if (isRightFixed && rightContainerElem) {
-                    dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth;
-                }
-            }
-            // 处理拖动事件
-            const updateEvent = (evnt) => {
-                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', Object.assign(Object.assign({}, params), { resizeWidth }), evnt);
-                    setTimeout(() => $xeTable.recalculate(true), 300);
-                });
-                removeClass(tableEl, 'drag--resize');
-            };
-            updateEvent(evnt);
-            if ($xeTable.closeMenu) {
-                $xeTable.closeMenu();
-            }
-        };
         const renderRows = (isGroup, isOptimizeMode, cols, $rowIndex) => {
             const { fixedType } = props;
             const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
@@ -176,6 +39,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;
@@ -184,6 +51,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';
@@ -198,15 +66,15 @@ export default defineComponent({
                 }
                 const columnIndex = $xeTable.getColumnIndex(column);
                 const _columnIndex = $xeTable.getVTColumnIndex(column);
-                const params = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter };
+                const cellParams = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter };
                 const thAttrs = {
                     colid,
                     colspan: column.colSpan > 1 ? column.colSpan : null,
                     rowspan: column.rowSpan > 1 ? column.rowSpan : null
                 };
                 const thOns = {
-                    onClick: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
-                    onDblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+                    onClick: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
+                    onDblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
                 };
                 // 横向虚拟滚动不支持动态行高
                 if (scrollXLoad && !hasEllipsis) {
@@ -215,11 +83,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) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
+                    thOns.onMousedown = (evnt) => $xeTable.triggerHeaderCellMousedownEvent(evnt, cellParams);
                 }
                 // 拖拽列事件
                 if (columnOpts.drag) {
@@ -233,9 +101,16 @@ export default defineComponent({
                 const isLastColumn = $columnIndex === cols.length - 1;
                 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 = {};
+                if (hasEllipsis) {
+                    tcStyle.height = `${currCellHeight}px`;
+                }
+                else {
+                    tcStyle.minHeight = `${currCellHeight}px`;
                 }
                 return h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-header--column', colid, {
                             [`col--${headAlign}`]: headAlign,
@@ -246,6 +121,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,
@@ -253,26 +129,34 @@ 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) : ''
-                    ], style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null }, thAttrs), thOns), { key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex }), [
+                        headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName) : '',
+                        headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(cellParams) : headerCellClassName) : ''
+                    ], style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : null }, thAttrs), thOns), { key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex }), [
                     h('div', {
                         class: ['vxe-cell', {
                                 '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) => resizeMousedownEvent(evnt, params),
-                            onDblclick: (evnt) => $xeTable.handleResizeDblclickEvent(evnt, params)
+                            onMousedown: (evnt) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+                            onDblclick: (evnt) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
                         })
                         : renderEmptyElement($xeTable)
                 ]);
@@ -281,12 +165,12 @@ export default defineComponent({
         const renderHeads = (isGroup, isOptimizeMode, headerGroups) => {
             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'}`,
@@ -312,9 +196,10 @@ 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;
             let isOptimizeMode = false;
@@ -410,15 +295,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)
+                ])
             ]);
         };
         watch(() => props.tableColumn, uploadColumn);

package/es/table/src/props.js

@@ -29,10 +29,10 @@ export default {
         type: [Boolean, String],
         default: () => getConfig().table.border
     },
-    // 单元格是否有边距
+    // 已废弃，被 cell-config.padding 替换
     padding: {
         type: Boolean,
-        default: () => getConfig().table.padding
+        default: null
     },
     // 是否圆角边框
     round: {
@@ -81,12 +81,18 @@ export default {
         type: Boolean,
         default: () => getConfig().table.highlightHoverRow
     },
-    // （即将废弃）是否要高亮当前选中列
+    /**
+     * （即将废弃）是否要高亮当前选中列
+     * @deprecated
+     */
     highlightCurrentColumn: {
         type: Boolean,
         default: () => getConfig().table.highlightCurrentColumn
     },
-    // （即将废弃）鼠标移到列是否要高亮显示
+    /**
+     * （即将废弃）鼠标移到列是否要高亮显示
+     * @deprecated
+     */
     highlightHoverColumn: {
         type: Boolean,
         default: () => getConfig().table.highlightHoverColumn
@@ -178,6 +184,10 @@ export default {
     columnConfig: Object,
     // 单元格配置信息
     cellConfig: Object,
+    // 表头单元格配置信息
+    headerCellConfig: Object,
+    // 表尾单元格配置信息
+    footerCellConfig: Object,
     // 行配置信息
     rowConfig: Object,
     // 已废弃，被 rowDragConfig 替换