vxe-table 4.8.5 → 4.8.7

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({
@@ -2243,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]) {
@@ -2718,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;
+                                }
                             }
                         }
                     }
@@ -5496,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
@@ -5529,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 [];
+        };
         /**
          * 内部方法
          */
@@ -5537,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,
             /**
              * 获取父容器元素
              */
@@ -7020,7 +7039,7 @@ export default defineComponent({
                         tableGroupColumn,
                         fixedColumn
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 h(TableBodyComponent, {
                     ref: isFixedLeft ? refTableLeftBody : refTableRightBody,
                     fixedType,
@@ -7036,7 +7055,7 @@ export default defineComponent({
                         fixedColumn,
                         fixedType
                     })
-                    : createCommentVNode()
+                    : renderEmptyElement($xeTable)
             ]);
         };
         const renderEmptyBody = () => {
@@ -7062,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;
@@ -7070,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;
@@ -7079,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}`, {
@@ -7136,7 +7158,7 @@ export default defineComponent({
                                 tableColumn,
                                 tableGroupColumn
                             })
-                            : createCommentVNode(),
+                            : renderEmptyElement($xeTable),
                         /**
                          * 表体
                          */
@@ -7154,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
@@ -7180,7 +7202,7 @@ export default defineComponent({
                             })
                         ])
                     ])
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 virtualScrollBars.y
                     ? h('div', {
                         key: 'vy',
@@ -7198,7 +7220,7 @@ export default defineComponent({
                             })
                         ])
                     ])
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 空数据
                  */
@@ -7246,7 +7268,7 @@ export default defineComponent({
                             default: () => loadingSlot({ $table: $xeTable, $grid: $xeGrid })
                         }
                         : {})
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 自定义列
                  */
@@ -7256,7 +7278,7 @@ export default defineComponent({
                         ref: refTableCustom,
                         customStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 筛选
                  */
@@ -7266,7 +7288,7 @@ export default defineComponent({
                         ref: refTableFilter,
                         filterStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 导入
                  */
@@ -7276,7 +7298,7 @@ export default defineComponent({
                         defaultOptions: reactData.importParams,
                         storeData: reactData.importStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 导出
                  */
@@ -7286,7 +7308,7 @@ export default defineComponent({
                         defaultOptions: reactData.exportParams,
                         storeData: reactData.exportStore
                     })
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 快捷菜单
                  */
@@ -7295,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),
                 /**
                  * 提示相关
                  */
@@ -7333,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

@@ -1074,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%;
 }
 
@@ -2652,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;
@@ -2736,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%;
@@ -2751,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,
@@ -2767,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);
@@ -2786,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;
@@ -2794,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;