vxe-table 4.8.4 → 4.8.6

package/es/table/src/table.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, createCommentVNode, reactive, ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
+import { defineComponent, h, reactive, ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
@@ -17,7 +17,7 @@ import TableFilterPanelComponent from '../module/filter/panel';
 import TableImportPanelComponent from '../module/export/import-panel';
 import TableExportPanelComponent from '../module/export/export-panel';
 import TableMenuPanelComponent from '../module/menu/panel';
-const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns } = VxeUI;
+const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
 const isWebkit = browse['-webkit'] && !browse.edge;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 export default defineComponent({
@@ -2175,7 +2175,9 @@ export default defineComponent({
                     const rowRest = fullAllDataRowIdData[rowid];
                     treeExpandLazyLoadedMaps[rowid] = row;
                     Promise.resolve(loadMethod({ $table: $xeTable, row })).then((childRecords) => {
-                        rowRest.treeLoaded = true;
+                        if (rowRest) {
+                            rowRest.treeLoaded = true;
+                        }
                         if (treeExpandLazyLoadedMaps[rowid]) {
                             delete treeExpandLazyLoadedMaps[rowid];
                         }
@@ -2201,7 +2203,9 @@ export default defineComponent({
                         }
                     }).catch(() => {
                         const { treeExpandLazyLoadedMaps } = reactData;
-                        rowRest.treeLoaded = false;
+                        if (rowRest) {
+                            rowRest.treeLoaded = false;
+                        }
                         if (treeExpandLazyLoadedMaps[rowid]) {
                             delete treeExpandLazyLoadedMaps[rowid];
                         }
@@ -2239,10 +2243,14 @@ export default defineComponent({
                     rowExpandLazyLoadedMaps[rowid] = row;
                     loadMethod({ $table: $xeTable, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) }).then(() => {
                         const { rowExpandedMaps } = reactData;
-                        rowRest.expandLoaded = true;
+                        if (rowRest) {
+                            rowRest.expandLoaded = true;
+                        }
                         rowExpandedMaps[rowid] = row;
                     }).catch(() => {
-                        rowRest.expandLoaded = false;
+                        if (rowRest) {
+                            rowRest.expandLoaded = false;
+                        }
                     }).finally(() => {
                         const { rowExpandLazyLoadedMaps } = reactData;
                         if (rowExpandLazyLoadedMaps[rowid]) {
@@ -2714,14 +2722,16 @@ export default defineComponent({
                     const rowid = getRowid($xeTable, row);
                     if (!treeTempExpandedMaps[rowid]) {
                         const rowRest = fullAllDataRowIdData[rowid];
-                        const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid];
-                        // 是否使用懒加载
-                        if (isLoad) {
-                            result.push(handleAsyncTreeExpandChilds(row));
-                        }
-                        else {
-                            if (row[childrenField] && row[childrenField].length) {
-                                treeTempExpandedMaps[rowid] = row;
+                        if (rowRest) {
+                            const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid];
+                            // 是否使用懒加载
+                            if (isLoad) {
+                                result.push(handleAsyncTreeExpandChilds(row));
+                            }
+                            else {
+                                if (row[childrenField] && row[childrenField].length) {
+                                    treeTempExpandedMaps[rowid] = row;
+                                }
                             }
                         }
                     }
@@ -3624,32 +3634,8 @@ export default defineComponent({
              * 如果已关联工具栏，则会同步更新
              */
             resetColumn(options) {
-                const { collectColumn } = internalData;
-                const customOpts = computeCustomOpts.value;
-                const { checkMethod } = customOpts;
-                const opts = Object.assign({
-                    visible: true,
-                    resizable: options === true,
-                    fixed: options === true,
-                    sort: options === true
-                }, options);
-                XEUtils.eachTree(collectColumn, (column) => {
-                    if (opts.resizable) {
-                        column.resizeWidth = 0;
-                    }
-                    if (opts.fixed) {
-                        column.fixed = column.defaultFixed;
-                    }
-                    if (opts.sort) {
-                        column.renderSortNumber = column.sortNumber;
-                    }
-                    if (!checkMethod || checkMethod({ column })) {
-                        column.visible = column.defaultVisible;
-                    }
-                    column.renderResizeWidth = column.renderWidth;
-                });
-                $xeTable.saveCustomStore('reset');
-                return tablePrivateMethods.handleCustom();
+                warnLog('vxe.error.delFunc', ['resetColumn', 'resetCustom']);
+                return $xeTable.resetCustom(options);
             },
             /**
              * 刷新列信息
@@ -5516,7 +5502,19 @@ export default defineComponent({
             }
         };
         const updateRowDropTipContent = (tdEl) => {
-            reactData.dragTipText = tdEl.textContent || '';
+            const { dragRow } = reactData;
+            const dragOpts = computeDragOpts.value;
+            const { rowTooltipMethod } = dragOpts;
+            let tipContent = '';
+            if (rowTooltipMethod) {
+                tipContent = `${rowTooltipMethod({
+                    row: dragRow
+                }) || ''}`;
+            }
+            else {
+                tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+            }
+            reactData.dragTipText = tipContent;
         };
         /**
          * 处理显示 tooltip
@@ -5549,6 +5547,17 @@ export default defineComponent({
             }
             return nextTick();
         };
+        const callSlot = (slotFunc, params) => {
+            if (slotFunc) {
+                if ($xeGrid) {
+                    return $xeGrid.callSlot(slotFunc, params);
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc(params));
+                }
+            }
+            return [];
+        };
         /**
          * 内部方法
          */
@@ -5557,17 +5566,7 @@ export default defineComponent({
                 return getConfig();
             },
             updateAfterDataIndex,
-            callSlot(slotFunc, params) {
-                if (slotFunc) {
-                    if ($xeGrid) {
-                        return $xeGrid.callSlot(slotFunc, params);
-                    }
-                    if (XEUtils.isFunction(slotFunc)) {
-                        return getSlotVNs(slotFunc(params));
-                    }
-                }
-                return [];
-            },
+            callSlot,
             /**
              * 获取父容器元素
              */
@@ -7040,7 +7039,7 @@ export default defineComponent({
                         tableGroupColumn,
                         fixedColumn
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 h(TableBodyComponent, {
                     ref: isFixedLeft ? refTableLeftBody : refTableRightBody,
                     fixedType,
@@ -7056,7 +7055,7 @@ export default defineComponent({
                         fixedColumn,
                         fixedType
                     })
-                    : createCommentVNode()
+                    : renderEmptyElement($xeTable)
             ]);
         };
         const renderEmptyBody = () => {
@@ -7082,7 +7081,7 @@ export default defineComponent({
         }
         const renderVN = () => {
             const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
-            const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData;
+            const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore, dragRow, dragTipText } = reactData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
             const tipConfig = computeTipConfig.value;
@@ -7090,6 +7089,7 @@ export default defineComponent({
             const checkboxOpts = computeCheckboxOpts.value;
             const treeOpts = computeTreeOpts.value;
             const rowOpts = computeRowOpts.value;
+            const dragOpts = computeDragOpts.value;
             const columnOpts = computeColumnOpts.value;
             const vSize = computeSize.value;
             const tableBorder = computeTableBorder.value;
@@ -7099,6 +7099,8 @@ export default defineComponent({
             const isMenu = computeIsMenu.value;
             const currLoading = reactData._isLoading || loading;
             const virtualScrollBars = computeVirtualScrollBars.value;
+            const dragSlots = dragOpts.slots || {};
+            const rowTipSlot = dragSlots.rowTip;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
@@ -7156,7 +7158,7 @@ export default defineComponent({
                                 tableColumn,
                                 tableGroupColumn
                             })
-                            : createCommentVNode(),
+                            : renderEmptyElement($xeTable),
                         /**
                          * 表体
                          */
@@ -7174,13 +7176,13 @@ export default defineComponent({
                                 footerTableData,
                                 tableColumn
                             })
-                            : createCommentVNode()
+                            : renderEmptyElement($xeTable)
                     ]),
                     h('div', {
                         class: 'vxe-table--fixed-wrapper'
                     }, [
-                        leftList && leftList.length && overflowX ? renderFixed('left') : createCommentVNode(),
-                        rightList && rightList.length && overflowX ? renderFixed('right') : createCommentVNode()
+                        leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
+                        rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
                     ])
                 ]),
                 virtualScrollBars.x
@@ -7200,7 +7202,7 @@ export default defineComponent({
                             })
                         ])
                     ])
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 virtualScrollBars.y
                     ? h('div', {
                         key: 'vy',
@@ -7218,7 +7220,7 @@ export default defineComponent({
                             })
                         ])
                     ])
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 空数据
                  */
@@ -7266,7 +7268,7 @@ export default defineComponent({
                             default: () => loadingSlot({ $table: $xeTable, $grid: $xeGrid })
                         }
                         : {})
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 自定义列
                  */
@@ -7276,7 +7278,7 @@ export default defineComponent({
                         ref: refTableCustom,
                         customStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 筛选
                  */
@@ -7286,7 +7288,7 @@ export default defineComponent({
                         ref: refTableFilter,
                         filterStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 导入
                  */
@@ -7296,7 +7298,7 @@ export default defineComponent({
                         defaultOptions: reactData.importParams,
                         storeData: reactData.importStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 导出
                  */
@@ -7306,7 +7308,7 @@ export default defineComponent({
                         defaultOptions: reactData.exportParams,
                         storeData: reactData.exportStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 快捷菜单
                  */
@@ -7315,16 +7317,18 @@ export default defineComponent({
                         key: 'tm',
                         ref: refTableMenu
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 拖拽提示
                  */
-                rowOpts.drag
+                rowOpts.drag && (dragRow || dragTipText)
                     ? h('div', {
                         ref: refRowDragTipElem,
-                        class: 'vxe-table--row-drag-hint'
-                    }, getI18n('vxe.table.dragTip', [reactData.dragTipText]))
-                    : createCommentVNode(),
+                        class: 'vxe-table--row-drag-tip'
+                    }, rowTipSlot
+                        ? (dragRow ? callSlot(rowTipSlot, { row: dragRow }) : [renderEmptyElement($xeTable)])
+                        : (dragTipText ? [h('span', dragTipText)] : [renderEmptyElement($xeTable)]))
+                    : renderEmptyElement($xeTable),
                 /**
                  * 提示相关
                  */
@@ -7353,9 +7357,9 @@ export default defineComponent({
                             ? h(VxeUITooltipComponent, Object.assign({ key: 'vtp', ref: refValidTooltip, class: [{
                                         'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
                                     }, 'vxe-table--valid-error'] }, (validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : {})))
-                            : createCommentVNode()
+                            : renderEmptyElement($xeTable)
                     ])
-                    : createCommentVNode()
+                    : renderEmptyElement($xeTable)
             ]);
         };
         const dataFlag = ref(0);

package/es/table/style.css

@@ -784,79 +784,63 @@
   display: flex;
 }
 
-.vxe-table-custom--list-wrapper {
+.vxe-table-custom--body {
   display: block;
   flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.vxe-table-custom--header,
-.vxe-table-custom--body {
+.vxe-table-custom--panel-list {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
-.vxe-table-custom--header > li,
-.vxe-table-custom--body > li {
+.vxe-table-custom--panel-list > li {
   max-width: 26em;
   min-width: 17em;
   padding: 0.2em 1em 0.2em 1em;
 }
-.vxe-table-custom--header > li.level--2,
-.vxe-table-custom--body > li.level--2 {
+.vxe-table-custom--panel-list > li.level--2 {
   padding-left: 3.5em;
 }
-.vxe-table-custom--header > li.level--2 .vxe-checkbox--icon,
-.vxe-table-custom--body > li.level--2 .vxe-checkbox--icon {
+.vxe-table-custom--panel-list > li.level--2 .vxe-checkbox--icon {
   left: 1.8em;
 }
-.vxe-table-custom--header > li.level--3,
-.vxe-table-custom--body > li.level--3 {
+.vxe-table-custom--panel-list > li.level--3 {
   padding-left: 4.5em;
 }
-.vxe-table-custom--header > li.level--3 .vxe-checkbox--icon,
-.vxe-table-custom--body > li.level--3 .vxe-checkbox--icon {
+.vxe-table-custom--panel-list > li.level--3 .vxe-checkbox--icon {
   left: 2.8em;
 }
-.vxe-table-custom--header > li.level--4,
-.vxe-table-custom--body > li.level--4 {
+.vxe-table-custom--panel-list > li.level--4 {
   padding-left: 5.5em;
 }
-.vxe-table-custom--header > li.level--4 .vxe-checkbox--icon,
-.vxe-table-custom--body > li.level--4 .vxe-checkbox--icon {
+.vxe-table-custom--panel-list > li.level--4 .vxe-checkbox--icon {
   left: 3.8em;
 }
-.vxe-table-custom--header > li.level--5,
-.vxe-table-custom--body > li.level--5 {
+.vxe-table-custom--panel-list > li.level--5 {
   padding-left: 6.5em;
 }
-.vxe-table-custom--header > li.level--5 .vxe-checkbox--icon,
-.vxe-table-custom--body > li.level--5 .vxe-checkbox--icon {
+.vxe-table-custom--panel-list > li.level--5 .vxe-checkbox--icon {
   left: 4.8em;
 }
-.vxe-table-custom--header > li.level--6,
-.vxe-table-custom--body > li.level--6 {
+.vxe-table-custom--panel-list > li.level--6 {
   padding-left: 7.5em;
 }
-.vxe-table-custom--header > li.level--6 .vxe-checkbox--icon,
-.vxe-table-custom--body > li.level--6 .vxe-checkbox--icon {
+.vxe-table-custom--panel-list > li.level--6 .vxe-checkbox--icon {
   left: 5.8em;
 }
-.vxe-table-custom--header > li.level--7,
-.vxe-table-custom--body > li.level--7 {
+.vxe-table-custom--panel-list > li.level--7 {
   padding-left: 8.5em;
 }
-.vxe-table-custom--header > li.level--7 .vxe-checkbox--icon,
-.vxe-table-custom--body > li.level--7 .vxe-checkbox--icon {
+.vxe-table-custom--panel-list > li.level--7 .vxe-checkbox--icon {
   left: 6.8em;
 }
-.vxe-table-custom--header > li.level--8,
-.vxe-table-custom--body > li.level--8 {
+.vxe-table-custom--panel-list > li.level--8 {
   padding-left: 9.5em;
 }
-.vxe-table-custom--header > li.level--8 .vxe-checkbox--icon,
-.vxe-table-custom--body > li.level--8 .vxe-checkbox--icon {
+.vxe-table-custom--panel-list > li.level--8 .vxe-checkbox--icon {
   left: 7.8em;
 }
 
@@ -870,20 +854,21 @@
           user-select: none;
 }
 
-.vxe-table-custom--body {
+.vxe-table-custom--panel-list {
   padding: 0.2em 0;
 }
-.vxe-table-custom--body .vxe-table-custom--checkbox-option:hover {
+.vxe-table-custom--panel-list .vxe-table-custom--checkbox-option:hover {
   background-color: var(--vxe-ui-table-row-hover-background-color);
 }
 
-.vxe-table-custom--footer {
+.vxe-table-custom--footer-buttons {
+  width: 100%;
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);
 }
-.vxe-table-custom--footer button {
+.vxe-table-custom--footer-buttons button {
   flex-grow: 1;
   height: 2.8em;
 }
@@ -1089,7 +1074,7 @@
 .vxe-table-custom-popup--column-item.col--sort, .vxe-table-custom-popup--column-item.col--visible, .vxe-table-custom-popup--column-item.col--resizable, .vxe-table-custom-popup--column-item.col--fixed {
   text-align: center;
 }
-.vxe-table-custom-popup--column-item.col--resizable > .vxe-input {
+.vxe-table-custom-popup--column-item.col--resizable > .vxe-input, .vxe-table-custom-popup--column-item.col--resizable > .vxe-number-input {
   width: 100%;
 }
 
@@ -1157,6 +1142,26 @@
   cursor: help;
 }
 
+.vxe-table-custom-popup--table-col-seq {
+  width: 80px;
+}
+
+.vxe-table-custom-popup--table-col-sort {
+  width: 80px;
+}
+
+.vxe-table-custom-popup--table-col-title {
+  min-width: 120px;
+}
+
+.vxe-table-custom-popup--table-col-width {
+  width: 140px;
+}
+
+.vxe-table-custom-popup--table-col-fixed {
+  width: 200px;
+}
+
 .vxe-table-export--panel-column > ul {
   list-style-type: none;
   overflow: auto;
@@ -2647,7 +2652,7 @@
 .vxe-table--render-default .vxe-body--row-list-move {
   transition: transform 0.35s;
 }
-.vxe-table--render-default .vxe-table--row-drag-hint {
+.vxe-table--render-default .vxe-table--row-drag-tip {
   display: none;
   position: absolute;
   top: 0;
@@ -2731,10 +2736,7 @@
 .vxe-table--render-default .vxe-body--column.col--selected {
   box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
 }
-.vxe-table--render-default .vxe-body--column.col--active, .vxe-table--render-default .vxe-body--column.col--selected {
-  position: relative;
-}
-.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint {
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-tip {
   width: 100%;
   position: absolute;
   left: 50%;
@@ -2746,12 +2748,25 @@
   padding-left: var(--vxe-ui-table-cell-padding-left);
   padding-right: var(--vxe-ui-table-cell-padding-right);
 }
-.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint .vxe-cell--valid-error-msg {
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-wrapper {
   display: inline-block;
   border-radius: var(--vxe-ui-border-radius);
+  pointer-events: auto;
+}
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-theme-beautify {
+  padding: 0.4em 0.8em;
+  color: #fff;
+  background-color: #f56c6c;
+}
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-theme-beautify .vxe-cell--valid-error-msg {
+  background: transparent;
+}
+.vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-theme-normal {
   color: var(--vxe-ui-table-validate-error-color);
   background-color: var(--vxe-ui-table-validate-error-background-color);
-  pointer-events: auto;
+}
+.vxe-table--render-default .vxe-body--column.col--active, .vxe-table--render-default .vxe-body--column.col--selected {
+  position: relative;
 }
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-default-input,
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-default-textarea,
@@ -2762,16 +2777,16 @@
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-ico-picker {
   border-color: var(--vxe-ui-table-validate-error-color);
 }
-.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   bottom: 100%;
 }
-.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child:first-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.valid-msg--single .vxe-body--row:last-child:first-child .vxe-cell--valid-error-tip {
   bottom: auto;
 }
-.vxe-table--render-default.valid-msg--full .vxe-body--row:last-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.valid-msg--full .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   top: calc(100% - 1.3em);
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint {
+.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-tip {
   width: 320px;
   position: absolute;
   bottom: calc(100% + 4px);
@@ -2781,7 +2796,7 @@
   pointer-events: none;
   z-index: 4;
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-hint .vxe-cell--valid-error-msg {
+.vxe-table--render-default.old-cell-valid .vxe-body--column.col--valid-error .vxe-cell--valid-error-tip .vxe-cell--valid-error-msg {
   display: inline-block;
   border-radius: -var(-vxe-border-radius);
   padding: 8px 12px;
@@ -2789,11 +2804,11 @@
   background-color: #f56c6c;
   pointer-events: auto;
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--row:first-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.old-cell-valid .vxe-body--row:first-child .vxe-cell--valid-error-tip {
   bottom: auto;
   top: calc(100% + 4px);
 }
-.vxe-table--render-default.old-cell-valid .vxe-body--column:first-child .vxe-cell--valid-error-hint {
+.vxe-table--render-default.old-cell-valid .vxe-body--column:first-child .vxe-cell--valid-error-tip {
   left: 10px;
   transform: translateX(0);
   text-align: left;