vxe-table 4.10.8 → 4.10.10

package/packages/table/src/table.ts

@@ -255,6 +255,13 @@ export default defineComponent({
         isFooter: false
       },
 
+      rowHeightStore: {
+        default: 48,
+        medium: 44,
+        small: 40,
+        mini: 36
+      },
+
       scrollVMLoading: false,
 
       calcCellHeightFlag: 1,
@@ -357,6 +364,7 @@ export default defineComponent({
     let tablePrivateMethods = {} as TablePrivateMethods
 
     const refElem = ref() as Ref<HTMLDivElement>
+    const refVarElem = ref() as Ref<HTMLDivElement>
     const refTooltip = ref() as Ref<VxeTooltipInstance>
     const refCommTooltip = ref() as Ref<VxeTooltipInstance>
     const refValidTooltip = ref() as Ref<VxeTooltipInstance>
@@ -473,12 +481,7 @@ export default defineComponent({
     })
 
     const computeRowHeightMaps = computed(() => {
-      return {
-        default: 48,
-        medium: 44,
-        small: 40,
-        mini: 36
-      }
+      return reactData.rowHeightStore
     })
 
     const computeDefaultRowHeight = computed(() => {
@@ -9200,7 +9203,7 @@ export default defineComponent({
     }
 
     const renderDragTip = () => {
-      const { dragRow } = reactData
+      const { dragRow, dragCol } = reactData
       const rowOpts = computeRowOpts.value
       const columnOpts = computeColumnOpts.value
       const rowDragOpts = computeRowDragOpts.value
@@ -9222,31 +9225,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)
@@ -9445,6 +9450,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'
@@ -9808,10 +9830,28 @@ export default defineComponent({
     })
 
     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/packages/ui/index.ts

@@ -52,12 +52,14 @@ VxeUI.setConfig({
     rowDragConfig: {
       showIcon: true,
       animation: true,
-      showGuidesStatus: true
+      showGuidesStatus: true,
+      showDragTip: true
     },
     columnDragConfig: {
       showIcon: true,
       animation: true,
-      showGuidesStatus: true
+      showGuidesStatus: true,
+      showDragTip: true
     },
     checkboxConfig: {
       // trigger: 'default',

package/styles/components/table.scss

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