releases 4.10.10

x-extends · Feb 10, 2025 · cc6653d · cc6653d
1 parent a4275a7
commit cc6653d
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.10.9",
+  "version": "4.10.10",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

diff --git a/packages/table/src/table.ts b/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(() => {
@@ -9447,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'
@@ -9810,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()
       }

diff --git a/styles/components/table.scss b/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%;