vxe-table 4.10.6-beta.25 → 4.10.6-beta.27

package/es/table/src/body.js

@@ -79,7 +79,7 @@ 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, padding: allPadding } = tableProps;
+            const { columnKey, 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;
@@ -96,8 +96,8 @@ export default defineComponent({
             const mouseOpts = computeMouseOpts.value;
             const areaOpts = computeAreaOpts.value;
             const { selectCellToRow } = areaOpts;
-            const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, 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 rowRest = fullAllDataRowIdData[rowid];
             const colid = column.id;
@@ -111,16 +111,17 @@ export default defineComponent({
             const isEdit = isEnableConf(editRender);
             const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
             let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX;
-            const isPadding = allPadding === null ? cellOpts.padding : allPadding;
-            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 || resizeHeight > 0;
+            const hasEllipsis = isAllOverflow || showTitle || showTooltip || showEllipsis;
+            const isRsHeight = resizeHeight > 0;
             let isDirty;
             const tdOns = {};
             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 tdAttrs = { colid };
@@ -262,14 +263,14 @@ export default defineComponent({
                 isVNPreEmptyStatus = true;
             }
             const tcStyle = {};
-            if (hasEllipsis) {
+            if (scrollYLoad || hasEllipsis || 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', {
@@ -345,19 +346,20 @@ export default defineComponent({
             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--rs-height': isRsHeight,
                         'col--to-row': showAreaRowStatus,
                         'col--auto-height': isVNAutoHeight,
                         'fixed--width': !isAutoCellWidth,
                         'fixed--hidden': fixedHiddenColumn,
-                        'is--padding': isPadding,
+                        'is--padding': isCellPadding,
                         'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
                         'is--drag-disabled': isDisabledDrag,
                         'col--dirty': isDirty,
@@ -371,8 +373,8 @@ export default defineComponent({
                 ], 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, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData;
             const { fullAllDataRowIdData } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
@@ -474,7 +476,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
@@ -537,7 +539,7 @@ export default defineComponent({
         const renderVN = () => {
             const { slots } = tableContext;
             const { fixedColumn, fixedType, tableColumn } = props;
-            const { showOverflow: allColumnOverflow, spanMethod, footerSpanMethod, mouseConfig } = tableProps;
+            const { spanMethod, footerSpanMethod, mouseConfig } = tableProps;
             const { isGroup, tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData;
             const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData;
             const rowOpts = computeRowOpts.value;
@@ -550,7 +552,7 @@ export default defineComponent({
             let renderColumnList = tableColumn;
             let isOptimizeMode = false;
             // 如果是使用优化模式
-            if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+            if (scrollXLoad || scrollYLoad || isAllOverflow) {
                 if (expandColumn || spanMethod || footerSpanMethod) {
                     // 如果不支持优化模式
                 }
@@ -632,7 +634,7 @@ export default defineComponent({
                     $xeTable.triggerBodyScrollEvent(evnt, fixedType);
                 }
             };
-            if (leftFixedWidth || rightFixedWidth) {
+            if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
                 ons.onWheel = $xeTable.triggerBodyWheelEvent;
             }
             return h('div', {

package/es/table/src/cell.js

@@ -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) {

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,
     // 自定义排序的属性

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,

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) {
@@ -57,7 +58,7 @@ export default defineComponent({
             const defaultRowHeight = computeDefaultRowHeight.value;
             const cellOpts = computeCellOpts.value;
             const footerCellOpts = computeFooterCellOpts.value;
-            const currCellHeight = footerCellOpts.height || cellOpts.height || defaultRowHeight;
+            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;

package/es/table/src/header.js

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
-import { convertHeaderColumnToRows } from './util';
+import { getCellHeight, convertHeaderColumnToRows } from './util';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'header';
 export default defineComponent({
@@ -42,7 +42,7 @@ export default defineComponent({
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             const headerCellOpts = computeHeaderCellOpts.value;
-            const currCellHeight = headerCellOpts.height || cellOpts.height || defaultRowHeight;
+            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;