vxe-table 4.10.6-beta.8 → 4.10.6

package/es/table/src/body.js

@@ -21,7 +21,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         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();
         const refBodyScroll = ref();
         const refBodyTable = ref();
@@ -33,10 +33,10 @@ export default defineComponent({
         // 滚动、拖动过程中不需要触发
         const isVMScrollProcess = () => {
             const { delayHover } = tableProps;
-            const { lastScrollTime, _isResize } = tableReactData;
-            return !!(_isResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
+            const { lastScrollTime, isDragResize } = tableReactData;
+            return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
         };
-        const renderLine = (params) => {
+        const renderLine = (params, cellHeight) => {
             const { row, column } = params;
             const { afterFullData } = tableInternalData;
             const { treeConfig } = tableProps;
@@ -58,12 +58,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`
                             }
                         })
@@ -77,26 +79,30 @@ export default defineComponent({
          */
         const renderTdColumn = (seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) => {
             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;
@@ -106,21 +112,25 @@ 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 = {};
-            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 = { colid };
-            const params = {
+            const tdAttrs = { colid };
+            const cellParams = {
                 $table: $xeTable,
                 $grid: $xeTable.xegrid,
                 isEdit: false,
@@ -148,7 +158,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) {
@@ -161,9 +171,9 @@ export default defineComponent({
                     }
                     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 退出事件
@@ -175,13 +185,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) => {
-                    $xeTable.triggerCellMousedownEvent(evnt, params);
+                    $xeTable.triggerCellMousedownEvent(evnt, cellParams);
                 };
             }
             // 拖拽列事件
@@ -190,11 +200,11 @@ export default defineComponent({
             }
             // 点击事件处理
             tdOns.onClick = (evnt) => {
-                $xeTable.triggerCellClickEvent(evnt, params);
+                $xeTable.triggerCellClickEvent(evnt, cellParams);
             };
             // 双击事件处理
             tdOns.onDblclick = (evnt) => {
-                $xeTable.triggerCellDblclickEvent(evnt, params);
+                $xeTable.triggerCellDblclickEvent(evnt, cellParams);
             };
             // 合并行或列
             if (mergeList.length) {
@@ -205,29 +215,29 @@ 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;
                 }
             }
@@ -235,37 +245,73 @@ 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 = {};
+            if (scrollYLoad || hasEllipsis || isCsHeight || isRsHeight) {
+                tcStyle.height = `${cellHeight}px`;
+            }
+            else {
+                tcStyle.minHeight = `${cellHeight}px`;
+            }
             const tdVNs = [];
-            if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
+            if (fixedHiddenColumn && isAllOverflow) {
                 tdVNs.push(h('div', {
+                    key: 'tc',
                     class: ['vxe-cell', {
                             'c--title': showTitle,
                             'c--tooltip': showTooltip,
                             'c--ellipsis': showEllipsis
                         }],
-                    style: {
-                        maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-                    }
+                    style: tcStyle
                 }));
             }
             else {
                 // 渲染单元格
-                tdVNs.push(...renderLine(params), h('div', {
+                tdVNs.push(...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 = Object.assign(Object.assign(Object.assign({}, params), errorValidItem), { rule: errorValidItem });
+                    const validParams = Object.assign(Object.assign(Object.assign({}, cellParams), errorValidItem), { rule: errorValidItem });
                     tdVNs.push(h('div', {
+                        key: 'tcv',
                         class: ['vxe-cell--valid-error-tip', getPropClass(validOpts.className, validParams)],
                         style: errRule && errRule.maxWidth
                             ? {
@@ -287,49 +333,49 @@ 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) ||
+                if ((!_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;
+            if (!fixedHiddenColumn && showResizable && isAllColumnDrag) {
+                tdVNs.push(h('div', {
+                    key: 'tcc',
+                    class: ['vxe-cell--col-resizable', {
+                            'is--line': !border || border === 'none'
+                        }],
+                    onMousedown: (evnt) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+                    onDblclick: (evnt) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
+                }));
             }
-            else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-                isPreLoadStatus = true;
+            if ((rowResize || isAllRowDrag) && rowOpts.resizable) {
+                tdVNs.push(h('div', {
+                    key: 'tcr',
+                    class: 'vxe-cell--row-resizable',
+                    onMousedown: (evnt) => $xeTable.handleRowResizeMousedownEvent(evnt, cellParams),
+                    onDblclick: (evnt) => $xeTable.handleRowResizeDblclickEvent(evnt, cellParams)
+                }));
             }
             return h('td', Object.assign(Object.assign(Object.assign({ 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,
@@ -337,16 +383,14 @@ export default defineComponent({
                         'col--valid-error': !!errorValidItem,
                         'col--current': currentColumn === column
                     },
-                    getPropClass(compCellClassName, params),
-                    getPropClass(className, params),
-                    getPropClass(allCellClassName, params)
-                ], 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) }), tdOns), isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : tdVNs);
+                    getPropClass(compCellClassName, cellParams),
+                    getPropClass(className, cellParams),
+                    getPropClass(allCellClassName, cellParams)
+                ], key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex }, tdAttrs), { style: Object.assign({}, XEUtils.isFunction(compCellStyle) ? compCellStyle(cellParams) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(cellParams) : cellStyle) }), tdOns), isOptimizeMode && fixedHiddenColumn ? [] : tdVNs);
         };
         const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
-            const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps;
-            const { hasFixedColumn, treeExpandedMaps, scrollXLoad, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData;
+            const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps;
+            const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData;
             const { fullAllDataRowIdData } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
@@ -431,7 +475,7 @@ export default defineComponent({
                 const tdVNs = tableColumn.map((column, $columnIndex) => {
                     return renderTdColumn(seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
                 });
-                rows.push(columnOpts.drag && columnDragOpts.animation
+                rows.push(!isColLoading && (columnOpts.drag && columnDragOpts.animation)
                     ? h(TransitionGroup, Object.assign({ name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`, tag: 'tr', class: trClass, rowid: rowid, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null, key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || treeConfig ? rowid : $rowIndex }, trOn), {
                         default: () => tdVNs
                     })
@@ -448,7 +492,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', Object.assign({ class: ['vxe-body--expanded-row', {
                                 'is--padding': padding
@@ -511,8 +555,8 @@ export default defineComponent({
         const renderVN = () => {
             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;
@@ -524,7 +568,7 @@ export default defineComponent({
             let renderColumnList = tableColumn;
             let isOptimizeMode = false;
             // 如果是使用优化模式
-            if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+            if (scrollXLoad || scrollYLoad || isAllOverflow) {
                 if (expandColumn || spanMethod || footerSpanMethod) {
                     // 如果不支持优化模式
                 }
@@ -645,9 +689,9 @@ export default defineComponent({
                             });
                         })),
                         /**
-                       * 内容
-                       */
-                        rowOpts.drag && rowDragOpts.animation
+                         * 内容
+                         */
+                        !(isRowLoading || isColLoading) && (rowOpts.drag && rowDragOpts.animation)
                             ? h(TransitionGroup, {
                                 ref: refBodyTBody,
                                 name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
@@ -691,6 +735,9 @@ export default defineComponent({
                             }),
                             h('span', {
                                 class: 'vxe-table--cell-active-area'
+                            }),
+                            h('span', {
+                                class: 'vxe-table--cell-row-status-area'
                             })
                         ])
                         : renderEmptyElement($xeTable),

package/es/table/src/cell.js

@@ -152,7 +152,7 @@ function renderTitleContent(params, content) {
     const ons = {};
     if (showTitle || showTooltip || showAllTip) {
         ons.onMouseenter = (evnt) => {
-            if (tableReactData._isResize) {
+            if (tableReactData.isDragResize) {
                 return;
             }
             if (showTitle) {
@@ -165,7 +165,7 @@ function renderTitleContent(params, content) {
     }
     if (showTooltip || showAllTip) {
         ons.onMouseleave = (evnt) => {
-            if (tableReactData._isResize) {
+            if (tableReactData.isDragResize) {
                 return;
             }
             if (showTooltip || showAllTip) {
@@ -179,18 +179,6 @@ function renderTitleContent(params, content) {
             : h('span', Object.assign({ class: 'vxe-cell--title' }, ons), getSlotVNs(content))
     ];
 }
-function formatFooterLabel(footerFormatter, params) {
-    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) {
     const { $table, column, _columnIndex, items, row } = params;
     const { slots, editRender, cellRender, footerFormatter } = column;
@@ -199,42 +187,40 @@ function getFooterContent(params) {
     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)
     ];
 }
 function getDefaultCellLabel(params) {
@@ -383,11 +369,7 @@ export const Cell = {
         return Cell.renderTreeIcon(params, Cell.renderDefaultCell(params));
     },
     renderDefaultFooter(params) {
-        return [
-            h('span', {
-                class: 'vxe-cell--item'
-            }, getFooterContent(params))
-        ];
+        return getFooterContent(params);
     },
     /**
      * 树节点
@@ -823,7 +805,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 [
@@ -835,20 +817,24 @@ export const Cell = {
                                 'sort--active': order === 'asc'
                             }],
                         title: getI18n('vxe.table.sortAsc'),
-                        onClick(evnt) {
-                            evnt.stopPropagation();
-                            $table.triggerSortEvent(evnt, column, 'asc');
-                        }
+                        onClick: allowBtn
+                            ? (evnt) => {
+                                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) {
-                            evnt.stopPropagation();
-                            $table.triggerSortEvent(evnt, column, 'desc');
-                        }
+                        onClick: allowBtn
+                            ? (evnt) => {
+                                evnt.stopPropagation();
+                                $table.triggerSortEvent(evnt, column, 'desc');
+                            }
+                            : undefined
                     })
                 ])
             ];

package/es/table/src/column.js

@@ -54,6 +54,16 @@ export const columnProps = {
     formatter: [Function, Array, String],
     // 格式化表尾显示内容
     footerFormatter: [Function, Array, String],
+    // 是否显示间距
+    padding: {
+        type: Boolean,
+        default: null
+    },
+    // 垂直对齐方式
+    verticalAlign: {
+        type: String,
+        default: null
+    },
     // 是否允许排序
     sortable: Boolean,
     // 自定义排序的属性
@@ -80,8 +90,10 @@ export const columnProps = {
     filterRender: Object,
     // 设置为树节点
     treeNode: Boolean,
-    // 指定为树节点
+    // 设置为拖拽排序
     dragSort: Boolean,
+    // 设置为行高拖拽
+    rowResize: Boolean,
     // 是否可视
     visible: {
         type: Boolean,

package/es/table/src/columnInfo.js

@@ -70,6 +70,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,
@@ -81,6 +83,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/es/table/src/emits.js

@@ -35,6 +35,8 @@ export default [
     'filter-visible',
     'clear-filter',
     'resizable-change',
+    'column-resizable-change',
+    'row-resizable-change',
     'toggle-row-expand',
     'toggle-tree-expand',
     'menu-click',