vxe-table 3.18.0 → 3.18.2

package/es/table/src/props.js

@@ -10,7 +10,7 @@ export const tableProps = {
     // 表格的最小高度
     minHeight: {
         type: [Number, String],
-        default: () => getConfig().table.minHeight
+        default: () => null
     },
     // 表格的最大高度
     maxHeight: [Number, String],
@@ -129,20 +129,37 @@ export const tableProps = {
     headerRowStyle: [Object, Function],
     // 给表尾行附加样式
     footerRowStyle: [Object, Function],
-    // 合并指定单元格
+    // 用于分组表头，显示为自定义列头，配合 mergeHeaderCells 灵活实现自定义合并
+    showCustomHeader: {
+        type: Boolean,
+        default: () => getConfig().table.showCustomHeader
+    },
+    // 临时合并指定的表头单元格
+    mergeHeaderCells: Array,
+    // 临时合并指定的单元格
     mergeCells: Array,
-    // 合并指定的表尾
+    // 临时合并指定的表尾单元格
+    mergeFooterCells: Array,
     mergeFooterItems: Array,
     // 自定义合并行或列的方法
     spanMethod: Function,
     // 表尾合并行或列
     footerSpanMethod: Function,
     // 设置所有内容过长时显示为省略号
-    showOverflow: { type: [Boolean, String], default: () => getConfig().table.showOverflow },
+    showOverflow: {
+        type: [Boolean, String],
+        default: () => getConfig().table.showOverflow
+    },
     // 设置表头所有内容过长时显示为省略号
-    showHeaderOverflow: { type: [Boolean, String], default: () => getConfig().table.showHeaderOverflow },
+    showHeaderOverflow: {
+        type: [Boolean, String],
+        default: () => getConfig().table.showHeaderOverflow
+    },
     // 设置表尾所有内容过长时显示为省略号
-    showFooterOverflow: { type: [Boolean, String], default: () => getConfig().table.showFooterOverflow },
+    showFooterOverflow: {
+        type: [Boolean, String],
+        default: () => getConfig().table.showFooterOverflow
+    },
     /** 高级属性 */
     /**
      * （即将废弃）columnKey 已废弃，被 column-config.useKey 替换

package/es/table/src/store.js

@@ -0,0 +1,8 @@
+// 跨表拖拽
+export const crossTableDragRowGlobal = {
+    row: null
+};
+export function getCrossTableDragRowInfo($xeTable) {
+    const crossTableDragRowInfo = $xeTable.crossTableDragRowInfo;
+    return crossTableDragRowInfo;
+}

package/es/table/src/table.js

@@ -10,6 +10,7 @@ import TableFooterComponent from './footer';
 import { tableProps } from './props';
 import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
+import { crossTableDragRowGlobal, getCrossTableDragRowInfo } from './store';
 import TableCustomPanelComponent from '../module/custom/panel';
 import TableFilterPanelComponent from '../module/filter/panel';
 import TableImportPanelComponent from '../module/export/import-panel';
@@ -30,12 +31,19 @@ function handleUpdateMergeBodyCells($xeTable, merges) {
     internalData.mergeBodyCellMaps = {};
     $xeTable.setMergeCells(merges);
 }
+function handleUpdateMergeHeaderCells($xeTable, merges) {
+    const internalData = $xeTable;
+    internalData.mergeHeaderList = [];
+    internalData.mergeHeaderMaps = {};
+    internalData.mergeHeaderCellMaps = {};
+    $xeTable.setMergeHeaderCells(merges);
+}
 function handleUpdateMergeFooterCells($xeTable, merges) {
     const internalData = $xeTable;
     internalData.mergeFooterList = [];
     internalData.mergeFooterMaps = {};
     internalData.mergeFooterCellMaps = {};
-    $xeTable.setMergeFooterItems(merges);
+    $xeTable.setMergeFooterCells(merges);
 }
 function handleKeyField($xeTable) {
     const internalData = $xeTable;
@@ -119,6 +127,7 @@ function renderEmptyBody(h, $xeTable) {
 const renderDragTipContents = (h, $xeTable) => {
     const props = $xeTable;
     const reactData = $xeTable;
+    const crossTableDragRowInfo = getCrossTableDragRowInfo($xeTable);
     const { dragConfig } = props;
     const { dragRow, dragCol, dragTipText } = reactData;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
@@ -127,8 +136,9 @@ const renderDragTipContents = (h, $xeTable) => {
     const rTipSlot = rowDragSlots.tip || (dragConfig && dragConfig.slots ? dragConfig.slots.rowTip : null);
     const columnDragSlots = columnDragOpts.slots || {};
     const cTipSlot = columnDragSlots.tip;
-    if (dragRow && rTipSlot) {
-        return $xeTable.callSlot(rTipSlot, { row: dragRow }, h);
+    const dRow = dragRow || (rowDragOpts.isCrossTableDrag ? crossTableDragRowInfo.row : null);
+    if (dRow && rTipSlot) {
+        return $xeTable.callSlot(rTipSlot, { row: dRow }, h);
     }
     if (dragCol && cTipSlot) {
         return $xeTable.callSlot(cTipSlot, { column: dragCol }, h);
@@ -137,11 +147,13 @@ const renderDragTipContents = (h, $xeTable) => {
 };
 const renderDragTip = (h, $xeTable) => {
     const reactData = $xeTable;
+    const crossTableDragRowInfo = getCrossTableDragRowInfo($xeTable);
     const { dragRow, dragCol } = reactData;
     const rowOpts = $xeTable.computeRowOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const rowDragOpts = $xeTable.computeRowDragOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const dRow = dragRow || (rowDragOpts.isCrossTableDrag ? crossTableDragRowInfo.row : null);
     if (rowOpts.drag || columnOpts.drag) {
         return h('div', {
             class: 'vxe-table--drag-wrapper'
@@ -158,7 +170,7 @@ const renderDragTip = (h, $xeTable) => {
                         'is--guides': columnDragOpts.showGuidesStatus
                     }]
             }),
-            (dragRow && rowDragOpts.showDragTip) || (dragCol && columnDragOpts.showDragTip)
+            (dRow && rowDragOpts.showDragTip) || (dragCol && columnDragOpts.showDragTip)
                 ? h('div', {
                     ref: 'refDragTipElem',
                     class: 'vxe-table--drag-sort-tip'
@@ -170,7 +182,7 @@ const renderDragTip = (h, $xeTable) => {
                             class: 'vxe-table--drag-sort-tip-status'
                         }, [
                             h('span', {
-                                class: ['vxe-table--drag-sort-tip-normal-status', dragRow ? getIcon().TABLE_DRAG_STATUS_ROW : getIcon().TABLE_DRAG_STATUS_COLUMN]
+                                class: ['vxe-table--drag-sort-tip-normal-status', dRow ? getIcon().TABLE_DRAG_STATUS_ROW : getIcon().TABLE_DRAG_STATUS_COLUMN]
                             }),
                             h('span', {
                                 class: ['vxe-table--drag-sort-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
@@ -326,7 +338,10 @@ function renderScrollX(h, $xeTable) {
                     ref: 'refScrollXSpaceElem',
                     class: 'vxe-table--scroll-x-space'
                 })
-            ])
+            ]),
+            h('div', {
+                class: 'vxe-table--scroll-x-handle-appearance'
+            })
         ]),
         h('div', {
             ref: 'refScrollXRightCornerElem',
@@ -470,9 +485,7 @@ export default {
     },
     data() {
         const xID = XEUtils.uniqueId();
-        return {
-            xID,
-            tId: xID,
+        const reactData = {
             // 低性能的静态列
             staticColumns: [],
             // 渲染的列分组
@@ -493,6 +506,8 @@ export default {
             scrollbarWidth: 0,
             // 横向滚动条的高度
             scrollbarHeight: 0,
+            // 最后滚动时间戳
+            lastScrollTime: 0,
             // 行高
             rowHeight: 0,
             // 表格父容器的高度
@@ -518,9 +533,13 @@ export default {
             expandColumn: null,
             checkboxColumn: null,
             radioColumn: null,
-            hasFixedColumn: false,
             // 树节点列信息
             treeNodeColumn: null,
+            hasFixedColumn: false,
+            // 刷新列标识，当列筛选被改变时，触发表格刷新数据
+            upDataFlag: 0,
+            // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
+            reColumnFlag: 0,
             // 初始化标识
             initStore: {
                 filter: false,
@@ -528,11 +547,6 @@ export default {
                 export: false,
                 custom: false
             },
-            customColumnList: [],
-            // 刷新列标识，当列筛选被改变时，触发表格刷新数据
-            upDataFlag: 0,
-            // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
-            reColumnFlag: 0,
             // 自定义列相关的信息
             customStore: {
                 btnEl: null,
@@ -546,6 +560,7 @@ export default {
                 oldFixedMaps: {},
                 oldVisibleMaps: {}
             },
+            customColumnList: [],
             // 当前选中的筛选列
             filterStore: {
                 isAllSelected: false,
@@ -614,6 +629,7 @@ export default {
             tooltipStore: {
                 row: null,
                 column: null,
+                content: null,
                 visible: false,
                 currOpts: {}
             },
@@ -646,8 +662,8 @@ export default {
                 columns: [],
                 isPrint: false,
                 hasFooter: false,
-                hasTree: false,
                 hasMerge: false,
+                hasTree: false,
                 hasColgroup: false,
                 visible: false
             },
@@ -678,6 +694,7 @@ export default {
             pendingRowFlag: 1,
             insertRowFlag: 1,
             removeRowFlag: 1,
+            mergeHeadFlag: 1,
             mergeBodyFlag: 1,
             mergeFootFlag: 1,
             rowHeightStore: {
@@ -694,23 +711,24 @@ export default {
             scrollXLeft: 0,
             scrollXWidth: 0,
             isScrollXBig: false,
+            lazScrollLoading: false,
             rowExpandHeightFlag: 1,
             calcCellHeightFlag: 1,
             resizeHeightFlag: 1,
             resizeWidthFlag: 1,
             isCustomStatus: false,
-            isDragRowMove: false,
+            isCrossDragRow: false,
             dragRow: null,
-            isDragColMove: false,
+            isCrossDragCol: false,
             dragCol: null,
             dragTipText: '',
             isDragResize: false,
             isRowLoading: false,
-            isColLoading: false,
-            reScrollFlag: 0,
-            reLayoutFlag: 0,
-            footFlag: 0
+            isColLoading: false
         };
+        return Object.assign(Object.assign({ xID }, reactData), { 
+            // 私有属性
+            reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal });
     },
     computed: Object.assign(Object.assign({}, {}), { tableId() {
             return this.computeTableId;
@@ -1389,9 +1407,21 @@ export default {
             const $xeTable = this;
             handleUpdateMergeBodyCells($xeTable, value);
         },
-        mergeFooterItems(value) {
+        mergeHeaderCells(value) {
             const $xeTable = this;
-            handleUpdateMergeFooterCells($xeTable, value);
+            handleUpdateMergeHeaderCells($xeTable, value);
+        },
+        mergeFooterCells() {
+            this.mergeFooteCellFlag++;
+        },
+        mergeFooterItems() {
+            this.mergeFooteCellFlag++;
+        },
+        mergeFooteCellFlag() {
+            const $xeTable = this;
+            const props = $xeTable;
+            const mFooterCells = props.mergeFooterCells || props.mergeFooterItems;
+            handleUpdateMergeFooterCells($xeTable, mFooterCells || []);
         },
         computeRowGroupFields(val) {
             const $xeTable = this;
@@ -1435,6 +1465,7 @@ export default {
         const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
         const keyboardOpts = $xeTable.computeKeyboardOpts;
         const aggregateOpts = $xeTable.computeAggregateOpts;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
         const { groupFields } = aggregateOpts;
         if (props.rowId) {
             warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField']);
@@ -1540,7 +1571,10 @@ export default {
             }
         }
         if (treeConfig && rowOpts.drag && !treeOpts.transform) {
-            warnLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
+            warnLog('vxe.error.notSupportProp', ['row-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
+        }
+        if (treeConfig && rowDragOpts.isCrossTableDrag && !rowDragOpts.isCrossDrag) {
+            errLog('vxe.error.reqSupportProp', ['tree-config & row-drag-config.isCrossTableDrag', 'row-drag-config.isCrossDrag']);
         }
         if (props.dragConfig) {
             warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config']);
@@ -1834,6 +1868,7 @@ export default {
         const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore } = reactData;
         const { leftList, rightList } = columnStore;
         const loadingSlot = slots.loading;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
         const tableTipConfig = $xeTable.computeTableTipConfig;
         const validTipConfig = $xeTable.computeValidTipConfig;
         const validOpts = $xeTable.computeValidOpts;
@@ -1853,6 +1888,11 @@ export default {
         const columnDragOpts = $xeTable.computeColumnDragOpts;
         const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
         const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
+        const { isCrossTableDrag } = rowDragOpts;
+        const rwOns = {};
+        if (isCrossTableDrag && !tableData.length) {
+            rwOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
+        }
         return h('div', {
             ref: 'refElem',
             class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
@@ -1919,7 +1959,8 @@ export default {
             ]),
             h('div', {
                 key: 'tw',
-                class: 'vxe-table--render-wrapper'
+                class: 'vxe-table--render-wrapper',
+                on: rwOns
             }, scrollbarXToTop
                 ? [
                     renderScrollX(h, $xeTable),

package/es/table/src/util.js

@@ -80,14 +80,19 @@ export function createInternalData() {
         sourceDataRowIdData: {},
         fullColumnIdData: {},
         fullColumnFieldData: {},
+        // 合并表头单元格的数据
+        mergeHeaderList: [],
+        mergeHeaderMaps: {},
+        // 已合并单元格数据集合
+        mergeHeaderCellMaps: {},
         // 合并单元格的数据
         mergeBodyList: [],
         mergeBodyMaps: {},
+        // 已合并单元格数据集合
+        mergeBodyCellMaps: {},
         // 合并表尾的数据
         mergeFooterList: [],
         mergeFooterMaps: {},
-        // 已合并单元格数据集合
-        mergeBodyCellMaps: {},
         // 已合并表尾数据集合
         mergeFooterCellMaps: {},
         // 已展开的行集合
@@ -181,6 +186,69 @@ export const convertHeaderColumnToRows = (originColumns) => {
     });
     return rows;
 };
+export function convertHeaderToGridRows(spanColumns) {
+    const rSize = spanColumns.length;
+    const cSize = spanColumns[0].reduce((sum, cell) => sum + cell.colSpan, 0);
+    const occupiedRows = [];
+    const fullRows = [];
+    for (let rIndex = 0; rIndex < rSize; rIndex++) {
+        const oCols = [];
+        const dCols = [];
+        for (let cIndex = 0; cIndex < cSize; cIndex++) {
+            oCols.push(false);
+            dCols.push('');
+        }
+        occupiedRows.push(oCols);
+        fullRows.push(dCols);
+    }
+    for (let rIndex = 0; rIndex < rSize; rIndex++) {
+        let currColIndex = 0;
+        for (const column of spanColumns[rIndex]) {
+            const { colSpan, rowSpan } = column;
+            let startColIndex = -1;
+            for (let ccIndex = currColIndex; ccIndex <= cSize - colSpan; ccIndex++) {
+                let oFlag = true;
+                for (let csIndex = 0; csIndex < colSpan; csIndex++) {
+                    if (occupiedRows[rIndex][ccIndex + csIndex]) {
+                        oFlag = false;
+                        break;
+                    }
+                }
+                if (oFlag) {
+                    startColIndex = ccIndex;
+                    break;
+                }
+            }
+            if (startColIndex === -1) {
+                for (let j = 0; j <= cSize - colSpan; j++) {
+                    let oFlag = true;
+                    for (let k = 0; k < colSpan; k++) {
+                        if (occupiedRows[rIndex][j + k]) {
+                            oFlag = false;
+                            break;
+                        }
+                    }
+                    if (oFlag) {
+                        startColIndex = j;
+                        break;
+                    }
+                }
+                if (startColIndex === -1) {
+                    // error
+                    break;
+                }
+            }
+            for (let srIndex = rIndex; srIndex < rIndex + rowSpan; srIndex++) {
+                for (let scIndex = startColIndex; scIndex < startColIndex + colSpan; scIndex++) {
+                    occupiedRows[srIndex][scIndex] = true;
+                    fullRows[srIndex][scIndex] = column;
+                }
+            }
+            currColIndex = startColIndex + colSpan;
+        }
+    }
+    return fullRows;
+}
 export function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
     const internalData = $xeTable;
     if (scrollLeft || scrollTop) {

package/es/table/style.css

@@ -2216,9 +2216,6 @@
   overflow-x: scroll;
   height: 18px;
 }
-.vxe-table .vxe-table--scroll-x-wrapper {
-  height: 100%;
-}
 .vxe-table .vxe-table--scroll-y-handle,
 .vxe-table .vxe-table--scroll-y-wrapper {
   width: 100%;
@@ -2459,9 +2456,6 @@
   right: auto;
   left: -0.3em;
 }
-.vxe-table--fixed-right-wrapper .vxe-header--column:last-child > .vxe-cell--col-resizable {
-  left: 0;
-}
 
 .vxe-body--column .vxe-cell--row-resizable {
   position: absolute;
@@ -2868,8 +2862,7 @@
 .vxe-table--render-default.border--default .vxe-table--scroll-y-bottom-corner, .vxe-table--render-default.border--full .vxe-table--scroll-y-bottom-corner, .vxe-table--render-default.border--outer .vxe-table--scroll-y-bottom-corner, .vxe-table--render-default.border--inner .vxe-table--scroll-y-bottom-corner {
   border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
 }
-.vxe-table--render-default.border--default .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--full .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--outer .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--inner .vxe-table--scroll-x-wrapper::after {
-  content: "";
+.vxe-table--render-default.border--default .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--full .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--outer .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--inner .vxe-table--scroll-x-handle-appearance {
   position: absolute;
   left: 0;
   width: 100%;
@@ -2877,11 +2870,11 @@
   z-index: 1;
   pointer-events: none;
 }
-.vxe-table--render-default.border--default.sx-pos--top .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--full.sx-pos--top .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--outer.sx-pos--top .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--inner.sx-pos--top .vxe-table--scroll-x-wrapper::after {
+.vxe-table--render-default.border--default.sx-pos--top .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--full.sx-pos--top .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--outer.sx-pos--top .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--inner.sx-pos--top .vxe-table--scroll-x-handle-appearance {
   top: 0;
   border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
 }
-.vxe-table--render-default.border--default.sx-pos--bottom .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--full.sx-pos--bottom .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--outer.sx-pos--bottom .vxe-table--scroll-x-wrapper::after, .vxe-table--render-default.border--inner.sx-pos--bottom .vxe-table--scroll-x-wrapper::after {
+.vxe-table--render-default.border--default.sx-pos--bottom .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--full.sx-pos--bottom .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--outer.sx-pos--bottom .vxe-table--scroll-x-handle-appearance, .vxe-table--render-default.border--inner.sx-pos--bottom .vxe-table--scroll-x-handle-appearance {
   bottom: 0;
   height: calc(100% + var(--vxe-ui-table-border-width));
   border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
@@ -2930,8 +2923,7 @@
   width: calc(100% + 1px);
   left: -1px;
 }
-.vxe-table--render-default.border--default .vxe-table--scroll-y-wrapper::after, .vxe-table--render-default.border--full .vxe-table--scroll-y-wrapper::after {
-  content: "";
+.vxe-table--render-default.border--default .vxe-table--scroll-y-handle-appearance, .vxe-table--render-default.border--full .vxe-table--scroll-y-handle-appearance {
   position: absolute;
   top: 0;
   width: 100%;
@@ -2939,11 +2931,11 @@
   z-index: 1;
   pointer-events: none;
 }
-.vxe-table--render-default.border--default.sy-pos--left .vxe-table--scroll-y-wrapper::after, .vxe-table--render-default.border--full.sy-pos--left .vxe-table--scroll-y-wrapper::after {
+.vxe-table--render-default.border--default.sy-pos--left .vxe-table--scroll-y-handle-appearance, .vxe-table--render-default.border--full.sy-pos--left .vxe-table--scroll-y-handle-appearance {
   left: 0;
   border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
 }
-.vxe-table--render-default.border--default.sy-pos--right .vxe-table--scroll-y-wrapper::after, .vxe-table--render-default.border--full.sy-pos--right .vxe-table--scroll-y-wrapper::after {
+.vxe-table--render-default.border--default.sy-pos--right .vxe-table--scroll-y-handle-appearance, .vxe-table--render-default.border--full.sy-pos--right .vxe-table--scroll-y-handle-appearance {
   right: 0;
   width: calc(100% + var(--vxe-ui-table-border-width));
   border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
@@ -3511,8 +3503,8 @@
   position: absolute;
   left: 50%;
   font-size: 12px;
-  line-height: 1.2em;
-  transform: translateX(-50%);
+  line-height: 1em;
+  transform: translate(-50%, -50%);
   text-align: left;
   z-index: 4;
   padding: 0 var(--vxe-ui-table-cell-padding-default);
@@ -3524,7 +3516,7 @@
   pointer-events: auto;
 }
 .vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-theme-beautify {
-  padding: 0.2em 0.6em 0.3em 0.6em;
+  padding: 0.2em 0.6em 0.25em 0.6em;
   color: #fff;
   background-color: var(--vxe-ui-table-validate-error-color);
 }
@@ -3549,9 +3541,11 @@
 }
 .vxe-table--render-default.valid-msg--single .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   bottom: 100%;
+  transform: translate(-50%, 50%);
 }
 .vxe-table--render-default.valid-msg--single .vxe-body--row:last-child:first-child .vxe-cell--valid-error-tip {
   bottom: auto;
+  transform: translate(-50%, -50%);
 }
 .vxe-table--render-default.valid-msg--full .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   top: calc(100% - 1.3em);