diff --git a/package.json b/package.json index f316bb3cf4..7be01116cb 100644 --- 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 index 76efd80d0d..de885f4af4 100644 --- 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 + const refVarElem = ref() as Ref const refTooltip = ref() as Ref const refCommTooltip = ref() as Ref const refValidTooltip = ref() as Ref @@ -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 index 9fbb31fda3..41bf972828 100644 --- 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%;