diff --git a/package.json b/package.json index de271ef194..0cc3b44958 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.7.50", + "version": "4.7.52", "description": "一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟树、列拖拽,懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...", "scripts": { "update": "npm install --legacy-peer-deps", @@ -28,7 +28,7 @@ "style": "lib/style.css", "typings": "types/index.d.ts", "dependencies": { - "vxe-pc-ui": "^4.0.67" + "vxe-pc-ui": "^4.0.68" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/table/module/filter/hook.ts b/packages/table/module/filter/hook.ts index 08d62c2d65..bda4de6b1e 100644 --- a/packages/table/module/filter/hook.ts +++ b/packages/table/module/filter/hook.ts @@ -14,7 +14,7 @@ const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['setFilter', 'clear hooks.add('tableFilterModule', { setupTable ($xeTable) { const { props, reactData, internalData } = $xeTable - const { refTableBody, refTableFilter } = $xeTable.getRefMaps() + const { refTableHeader, refTableBody, refTableFilter } = $xeTable.getRefMaps() const { computeFilterOpts, computeMouseOpts } = $xeTable.getComputeMaps() const filterPrivateMethods: TableFilterPrivateMethods = { @@ -63,31 +63,34 @@ hooks.add('tableFilterModule', { filterStore.visible = true initStore.filter = true nextTick(() => { + const tableHeader = refTableHeader.value const tableBody = refTableBody.value + const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null const bodyElem = tableBody.$el as HTMLDivElement + if (!bodyElem) { + return + } const tableFilter = refTableFilter.value const filterWrapperElem = tableFilter ? tableFilter.$el as HTMLDivElement : null - let filterWidth = 0 - let filterHeight = 0 - let filterHeadElem: HTMLDivElement | null = null - let filterFootElem: HTMLDivElement | null = null - if (filterWrapperElem) { - filterWidth = filterWrapperElem.offsetWidth - filterHeight = filterWrapperElem.offsetHeight - filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header') - filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer') + if (!filterWrapperElem) { + return } + const filterWidth = filterWrapperElem.offsetWidth + const filterHeight = filterWrapperElem.offsetHeight + const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header') + const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer') const centerWidth = filterWidth / 2 const minMargin = 10 const maxLeft = bodyElem.clientWidth - filterWidth - minMargin let left, right const style: any = { - top: `${targetElem.offsetTop + targetElem.offsetParent.offsetTop + targetElem.offsetHeight + 8}px` + top: `${targetElem.offsetTop + targetElem.offsetParent.offsetTop + targetElem.offsetHeight}px` } // 判断面板不能大于表格高度 let maxHeight: number | null = null - if (filterHeight >= bodyElem.clientHeight) { - maxHeight = Math.max(60, bodyElem.clientHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0)) + const bodyHeight = bodyElem.clientHeight - (headerElem ? headerElem.clientHeight / 2 : 0) + if (filterHeight >= bodyHeight) { + maxHeight = Math.max(40, bodyHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0)) } if (column.fixed === 'left') { left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth