vxe-table 3.18.0 → 3.18.2

package/packages/table/src/props.ts

@@ -15,7 +15,7 @@ export const tableProps = {
   // 表格的最小高度
   minHeight: {
     type: [Number, String] as PropType<VxeTablePropTypes.MinHeight>,
-    default: () => getConfig().table.minHeight
+    default: () => null
   },
   // 表格的最大高度
   maxHeight: [Number, String] as PropType<VxeTablePropTypes.MaxHeight>,
@@ -131,23 +131,40 @@ export const tableProps = {
   // 给行附加样式
   rowStyle: [Object, Function],
   // 给表头行附加样式
-  headerRowStyle: [Object, Function],
+  headerRowStyle: [Object, Function] as PropType<VxeTablePropTypes.HeaderRowStyle>,
   // 给表尾行附加样式
-  footerRowStyle: [Object, Function],
-  // 合并指定单元格
-  mergeCells: Array,
-  // 合并指定的表尾
-  mergeFooterItems: Array,
+  footerRowStyle: [Object, Function] as PropType<VxeTablePropTypes.FooterRowStyle>,
+  // 用于分组表头，显示为自定义列头，配合 mergeHeaderCells 灵活实现自定义合并
+  showCustomHeader: {
+    type: Boolean as PropType<VxeTablePropTypes.ShowCustomHeader>,
+    default: () => getConfig().table.showCustomHeader
+  },
+  // 临时合并指定的表头单元格
+  mergeHeaderCells: Array as PropType<VxeTablePropTypes.MergeHeaderCells>,
+  // 临时合并指定的单元格
+  mergeCells: Array as PropType<VxeTablePropTypes.MergeCells>,
+  // 临时合并指定的表尾单元格
+  mergeFooterCells: Array as PropType<VxeTablePropTypes.MergeFooterCells>,
+  mergeFooterItems: Array as PropType<VxeTablePropTypes.MergeFooterItems>,
   // 自定义合并行或列的方法
-  spanMethod: Function,
+  spanMethod: Function as PropType<VxeTablePropTypes.SpanMethod>,
   // 表尾合并行或列
-  footerSpanMethod: Function,
+  footerSpanMethod: Function as PropType<VxeTablePropTypes.FooterSpanMethod>,
   // 设置所有内容过长时显示为省略号
-  showOverflow: { type: [Boolean, String], default: () => getConfig().table.showOverflow },
+  showOverflow: {
+    type: [Boolean, String] as PropType<VxeTablePropTypes.ShowOverflow>,
+    default: () => getConfig().table.showOverflow
+  },
   // 设置表头所有内容过长时显示为省略号
-  showHeaderOverflow: { type: [Boolean, String], default: () => getConfig().table.showHeaderOverflow },
+  showHeaderOverflow: {
+    type: [Boolean, String] as PropType<VxeTablePropTypes.ShowHeaderOverflow>,
+    default: () => getConfig().table.showHeaderOverflow
+  },
   // 设置表尾所有内容过长时显示为省略号
-  showFooterOverflow: { type: [Boolean, String], default: () => getConfig().table.showFooterOverflow },
+  showFooterOverflow: {
+    type: [Boolean, String] as PropType<VxeTablePropTypes.ShowFooterOverflow>,
+    default: () => getConfig().table.showFooterOverflow
+  },
 
   /** 高级属性 */
   /**

package/packages/table/src/store.ts

@@ -0,0 +1,15 @@
+import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+
+interface CrossTableDragRowObj {
+  row: any
+}
+
+// 跨表拖拽
+export const crossTableDragRowGlobal: CrossTableDragRowObj = {
+  row: null
+}
+
+export function getCrossTableDragRowInfo ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const crossTableDragRowInfo = ($xeTable as any).crossTableDragRowInfo as CrossTableDragRowObj
+  return crossTableDragRowInfo
+}

package/packages/table/src/table.ts

@@ -11,6 +11,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'
@@ -39,13 +40,22 @@ function handleUpdateMergeBodyCells ($xeTable: VxeTableConstructor & VxeTablePri
   $xeTable.setMergeCells(merges)
 }
 
+function handleUpdateMergeHeaderCells ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  internalData.mergeHeaderList = []
+  internalData.mergeHeaderMaps = {}
+  internalData.mergeHeaderCellMaps = {}
+  $xeTable.setMergeHeaderCells(merges)
+}
+
 function handleUpdateMergeFooterCells ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) {
   const internalData = $xeTable as unknown as TableInternalData
 
   internalData.mergeFooterList = []
   internalData.mergeFooterMaps = {}
   internalData.mergeFooterCellMaps = {}
-  $xeTable.setMergeFooterItems(merges)
+  $xeTable.setMergeFooterCells(merges)
 }
 
 function handleKeyField ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
@@ -134,6 +144,7 @@ function renderEmptyBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeT
 const renderDragTipContents = (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) => {
   const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
+  const crossTableDragRowInfo = getCrossTableDragRowInfo($xeTable)
 
   const { dragConfig } = props
   const { dragRow, dragCol, dragTipText } = reactData
@@ -143,9 +154,10 @@ const renderDragTipContents = (h: CreateElement, $xeTable: VxeTableConstructor &
   const rTipSlot = rowDragSlots.tip || (dragConfig && dragConfig.slots ? dragConfig.slots.rowTip : null)
   const columnDragSlots = columnDragOpts.slots || {}
   const cTipSlot = columnDragSlots.tip
+  const dRow = dragRow || (rowDragOpts.isCrossTableDrag ? crossTableDragRowInfo.row : null)
 
-  if (dragRow && rTipSlot) {
-    return $xeTable.callSlot(rTipSlot, { row: dragRow }, h)
+  if (dRow && rTipSlot) {
+    return $xeTable.callSlot(rTipSlot, { row: dRow }, h)
   }
   if (dragCol && cTipSlot) {
     return $xeTable.callSlot(cTipSlot, { column: dragCol }, h)
@@ -155,12 +167,14 @@ const renderDragTipContents = (h: CreateElement, $xeTable: VxeTableConstructor &
 
 const renderDragTip = (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) => {
   const reactData = $xeTable as unknown as TableReactData
+  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', {
@@ -178,7 +192,7 @@ const renderDragTip = (h: CreateElement, $xeTable: VxeTableConstructor & VxeTabl
           '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'
@@ -190,7 +204,7 @@ const renderDragTip = (h: CreateElement, $xeTable: VxeTableConstructor & VxeTabl
               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]
@@ -353,7 +367,10 @@ function renderScrollX (h: CreateElement, $xeTable: VxeTableConstructor & VxeTab
           ref: 'refScrollXSpaceElem',
           class: 'vxe-table--scroll-x-space'
         })
-      ])
+      ]),
+      h('div', {
+        class: 'vxe-table--scroll-x-handle-appearance'
+      })
     ]),
     h('div', {
       ref: 'refScrollXRightCornerElem',
@@ -503,9 +520,8 @@ export default {
   },
   data () {
     const xID = XEUtils.uniqueId()
-    return {
-      xID,
-      tId: xID,
+
+    const reactData: TableReactData = {
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -526,6 +542,8 @@ export default {
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       // 行高
       rowHeight: 0,
       // 表格父容器的高度
@@ -551,9 +569,13 @@ export default {
       expandColumn: null,
       checkboxColumn: null,
       radioColumn: null,
-      hasFixedColumn: false,
       // 树节点列信息
       treeNodeColumn: null,
+      hasFixedColumn: false,
+      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
+      upDataFlag: 0,
+      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
+      reColumnFlag: 0,
       // 初始化标识
       initStore: {
         filter: false,
@@ -561,11 +583,6 @@ export default {
         export: false,
         custom: false
       },
-      customColumnList: [],
-      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
-      upDataFlag: 0,
-      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
-      reColumnFlag: 0,
       // 自定义列相关的信息
       customStore: {
         btnEl: null,
@@ -579,6 +596,7 @@ export default {
         oldFixedMaps: {},
         oldVisibleMaps: {}
       },
+      customColumnList: [],
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -647,6 +665,7 @@ export default {
       tooltipStore: {
         row: null,
         column: null,
+        content: null,
         visible: false,
         currOpts: {}
       },
@@ -679,8 +698,8 @@ export default {
         columns: [],
         isPrint: false,
         hasFooter: false,
-        hasTree: false,
         hasMerge: false,
+        hasTree: false,
         hasColgroup: false,
         visible: false
       },
@@ -714,6 +733,8 @@ export default {
       pendingRowFlag: 1,
       insertRowFlag: 1,
       removeRowFlag: 1,
+
+      mergeHeadFlag: 1,
       mergeBodyFlag: 1,
       mergeFootFlag: 1,
 
@@ -733,6 +754,8 @@ export default {
       scrollXWidth: 0,
       isScrollXBig: false,
 
+      lazScrollLoading: false,
+
       rowExpandHeightFlag: 1,
       calcCellHeightFlag: 1,
       resizeHeightFlag: 1,
@@ -740,19 +763,27 @@ export default {
 
       isCustomStatus: false,
 
-      isDragRowMove: false,
+      isCrossDragRow: false,
       dragRow: null,
-      isDragColMove: false,
+      isCrossDragCol: false,
       dragCol: null,
       dragTipText: '',
 
       isDragResize: false,
       isRowLoading: false,
-      isColLoading: false,
+      isColLoading: false
+    }
 
+    return {
+      xID,
+      ...reactData,
+
+      // 私有属性
       reScrollFlag: 0,
       reLayoutFlag: 0,
-      footFlag: 0
+      footFlag: 0,
+      mergeFooteCellFlag: 0,
+      crossTableDragRowInfo: crossTableDragRowGlobal
     }
   },
   computed: {
@@ -1492,10 +1523,23 @@ export default {
 
       handleUpdateMergeBodyCells($xeTable, value)
     },
-    mergeFooterItems (value: any) {
+    mergeHeaderCells (value: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
-      handleUpdateMergeFooterCells($xeTable, value)
+      handleUpdateMergeHeaderCells($xeTable, value)
+    },
+    mergeFooterCells () {
+      this.mergeFooteCellFlag++
+    },
+    mergeFooterItems () {
+      this.mergeFooteCellFlag++
+    },
+    mergeFooteCellFlag () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      const mFooterCells = props.mergeFooterCells || props.mergeFooterItems
+      handleUpdateMergeFooterCells($xeTable, mFooterCells || [])
     },
 
     computeRowGroupFields (val: any) {
@@ -1545,6 +1589,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) {
@@ -1652,7 +1697,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'])
@@ -1973,6 +2021,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
@@ -1992,6 +2041,11 @@ export default {
     const columnDragOpts = $xeTable.computeColumnDragOpts
     const scrollbarXToTop = $xeTable.computeScrollbarXToTop
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
+    const { isCrossTableDrag } = rowDragOpts
+    const rwOns: Record<string, any> = {}
+    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'}`, {
@@ -2058,7 +2112,8 @@ export default {
       ]),
       h('div', {
         key: 'tw',
-        class: 'vxe-table--render-wrapper'
+        class: 'vxe-table--render-wrapper',
+        on: rwOns
       }, scrollbarXToTop
         ? [
             renderScrollX(h, $xeTable),

package/packages/table/src/util.ts

@@ -73,6 +73,7 @@ export function createInternalData (): TableInternalData {
     tableFullColumn: [],
     // 渲染所有列
     visibleColumn: [],
+
     // 全量数据集（包括当前和已删除）
     fullAllDataRowIdData: {},
     // 数据集（仅当前）
@@ -84,16 +85,22 @@ export function createInternalData (): TableInternalData {
     fullColumnIdData: {},
     fullColumnFieldData: {},
 
+    // 合并表头单元格的数据
+    mergeHeaderList: [],
+    mergeHeaderMaps: {},
+    // 已合并单元格数据集合
+    mergeHeaderCellMaps: {},
     // 合并单元格的数据
     mergeBodyList: [],
     mergeBodyMaps: {},
+    // 已合并单元格数据集合
+    mergeBodyCellMaps: {},
     // 合并表尾的数据
     mergeFooterList: [],
     mergeFooterMaps: {},
-    // 已合并单元格数据集合
-    mergeBodyCellMaps: {},
     // 已合并表尾数据集合
     mergeFooterCellMaps: {},
+
     // 已展开的行集合
     rowExpandedMaps: {},
     // 懒加载中的展开行的集合
@@ -194,6 +201,73 @@ export const convertHeaderColumnToRows = (originColumns: any) => {
   return rows
 }
 
+export function convertHeaderToGridRows (spanColumns: VxeTableDefines.ColumnInfo[][]) {
+  const rSize = spanColumns.length
+  const cSize = spanColumns[0].reduce((sum, cell) => sum + cell.colSpan, 0)
+
+  const occupiedRows: boolean[][] = []
+  const fullRows: any[][] = []
+  for (let rIndex = 0; rIndex < rSize; rIndex++) {
+    const oCols: boolean[] = []
+    const dCols: string[] = []
+    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: VxeTableConstructor, scrollLeft: number, scrollTop: number) {
   const internalData = $xeTable as unknown as TableInternalData
 

package/styles/components/table.scss

@@ -645,9 +645,6 @@ $btnThemeList: (
     overflow-x: scroll;
     height: 18px;
   }
-  .vxe-table--scroll-x-wrapper {
-    height: 100%;
-  }
   .vxe-table--scroll-y-handle,
   .vxe-table--scroll-y-wrapper {
     width: 100%;
@@ -891,13 +888,6 @@ $btnThemeList: (
     right: auto;
     left: -0.3em;
   }
-  .vxe-header--column {
-    &:last-child {
-      & > .vxe-cell--col-resizable {
-        left: 0;
-      }
-    }
-  }
 }
 
 .vxe-body--column {
@@ -1415,32 +1405,25 @@ $btnThemeList: (
     .vxe-table--scroll-y-bottom-corner {
       border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
     }
-    .vxe-table--scroll-x-wrapper {
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        pointer-events: none;
-      }
+    .vxe-table--scroll-x-handle-appearance {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
     }
     &.sx-pos--top {
-      .vxe-table--scroll-x-wrapper {
-        &::after {
-          top: 0;
-          border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-        }
+      .vxe-table--scroll-x-handle-appearance {
+        top: 0;
+        border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
       }
     }
     &.sx-pos--bottom {
-      .vxe-table--scroll-x-wrapper {
-        &::after {
-          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);
-        }
+      .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);
       }
     }
   }
@@ -1514,32 +1497,25 @@ $btnThemeList: (
         }
       }
     }
-    .vxe-table--scroll-y-wrapper {
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        pointer-events: none;
-      }
+    .vxe-table--scroll-y-handle-appearance {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
     }
     &.sy-pos--left {
-      .vxe-table--scroll-y-wrapper {
-        &::after {
-          left: 0;
-          border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-        }
+      .vxe-table--scroll-y-handle-appearance {
+        left: 0;
+        border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
       }
     }
     &.sy-pos--right {
-      .vxe-table--scroll-y-wrapper {
-        &::after {
-          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);
-        }
+      .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);
       }
     }
   }
@@ -2159,8 +2135,8 @@ $btnThemeList: (
       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);
@@ -2172,7 +2148,7 @@ $btnThemeList: (
       pointer-events: auto;
     }
     .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);
       .vxe-cell--valid-error-msg {
@@ -2204,10 +2180,12 @@ $btnThemeList: (
       &:last-child {
         .vxe-cell--valid-error-tip {
           bottom: calc(100%);
+          transform: translate(-50%, 50%);
         }
         &:first-child {
           .vxe-cell--valid-error-tip {
             bottom: auto;
+            transform: translate(-50%, -50%);
           }
         }
       }