vxe-table 4.10.8 → 4.10.10

package/es/table/src/table.js

@@ -243,6 +243,12 @@ export default defineComponent({
                 isHeader: false,
                 isFooter: false
             },
+            rowHeightStore: {
+                default: 48,
+                medium: 44,
+                small: 40,
+                mini: 36
+            },
             scrollVMLoading: false,
             calcCellHeightFlag: 1,
             resizeHeightFlag: 0,
@@ -337,6 +343,7 @@ export default defineComponent({
         let tableMethods = {};
         let tablePrivateMethods = {};
         const refElem = ref();
+        const refVarElem = ref();
         const refTooltip = ref();
         const refCommTooltip = ref();
         const refValidTooltip = ref();
@@ -436,12 +443,7 @@ export default defineComponent({
             return 0;
         });
         const computeRowHeightMaps = computed(() => {
-            return {
-                default: 48,
-                medium: 44,
-                small: 40,
-                mini: 36
-            };
+            return reactData.rowHeightStore;
         });
         const computeDefaultRowHeight = computed(() => {
             const vSize = computeSize.value;
@@ -9084,7 +9086,7 @@ export default defineComponent({
             return [h('span', dragTipText)];
         };
         const renderDragTip = () => {
-            const { dragRow } = reactData;
+            const { dragRow, dragCol } = reactData;
             const rowOpts = computeRowOpts.value;
             const columnOpts = computeColumnOpts.value;
             const rowDragOpts = computeRowDragOpts.value;
@@ -9105,31 +9107,33 @@ export default defineComponent({
                                 'is--guides': columnDragOpts.showGuidesStatus
                             }]
                     }),
-                    h('div', {
-                        ref: refDragTipElem,
-                        class: 'vxe-table--drag-sort-tip'
-                    }, [
-                        h('div', {
-                            class: 'vxe-table--drag-sort-tip-wrapper'
+                    (dragRow && rowDragOpts.showDragTip) || (dragCol && columnDragOpts.showDragTip)
+                        ? h('div', {
+                            ref: refDragTipElem,
+                            class: 'vxe-table--drag-sort-tip'
                         }, [
                             h('div', {
-                                class: 'vxe-table--drag-sort-tip-status'
+                                class: 'vxe-table--drag-sort-tip-wrapper'
                             }, [
-                                h('span', {
-                                    class: ['vxe-table--drag-sort-tip-normal-status', dragRow ? 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]
-                                }),
-                                h('span', {
-                                    class: ['vxe-table--drag-sort-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
-                                })
-                            ]),
-                            h('div', {
-                                class: 'vxe-table--drag-sort-tip-content'
-                            }, renderDragTipContents())
+                                h('div', {
+                                    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]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-table--drag-sort-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-table--drag-sort-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
+                                    })
+                                ]),
+                                h('div', {
+                                    class: 'vxe-table--drag-sort-tip-content'
+                                }, renderDragTipContents())
+                            ])
                         ])
-                    ])
+                        : renderEmptyElement($xeTable)
                 ]);
             }
             return renderEmptyElement($xeTable);
@@ -9323,6 +9327,23 @@ export default defineComponent({
                 h('div', {
                     class: 'vxe-table-slots'
                 }, slots.default ? slots.default({}) : []),
+                h('div', {
+                    ref: refVarElem,
+                    class: 'vxe-table-vars'
+                }, [
+                    h('div', {
+                        class: 'vxe-table-var-default'
+                    }),
+                    h('div', {
+                        class: 'vxe-table-var-medium'
+                    }),
+                    h('div', {
+                        class: 'vxe-table-var-small'
+                    }),
+                    h('div', {
+                        class: 'vxe-table-var-mini'
+                    })
+                ]),
                 h('div', {
                     key: 'tw',
                     class: 'vxe-table--render-wrapper'
@@ -9668,9 +9689,26 @@ export default defineComponent({
             tablePrivateMethods.preventEvent(null, 'deactivated', { $table: $xeTable });
         });
         onMounted(() => {
+            const { rowHeightStore } = reactData;
+            const varEl = refVarElem.value;
             const columnOpts = computeColumnOpts.value;
             const rowOpts = computeRowOpts.value;
             const customOpts = computeCustomOpts.value;
+            if (varEl) {
+                const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
+                if (defEl) {
+                    rowHeightStore.default = defEl.clientHeight;
+                }
+                if (mediumEl) {
+                    rowHeightStore.medium = mediumEl.clientHeight;
+                }
+                if (smallEl) {
+                    rowHeightStore.small = smallEl.clientHeight;
+                }
+                if (miniEl) {
+                    rowHeightStore.mini = miniEl.clientHeight;
+                }
+            }
             if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
                 initTpImg();
             }

package/es/table/style.css

@@ -1682,6 +1682,29 @@
   display: none;
 }
 
+.vxe-table-vars {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+.vxe-table-vars .vxe-table-var-default {
+  height: var(--vxe-ui-table-row-height-default);
+}
+.vxe-table-vars .vxe-table-var-medium {
+  height: var(--vxe-ui-table-row-height-medium);
+}
+.vxe-table-vars .vxe-table-var-small {
+  height: var(--vxe-ui-table-row-height-small);
+}
+.vxe-table-vars .vxe-table-var-mini {
+  height: var(--vxe-ui-table-row-height-mini);
+}
+
 .vxe-table--print-frame {
   position: fixed;
   bottom: -100%;