From 0447fdb9c9ea0d314e8fdc1a99e7bc8bd64bdedc Mon Sep 17 00:00:00 2001 From: puhui999 Date: Thu, 13 Apr 2023 16:41:54 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=96=B0=E5=A2=9Ehooks=E5=87=BD=E6=95=B0us?= =?UTF-8?q?eAdaptiveXTable=E4=BD=BF=E8=A1=A8=E6=A0=BC=E8=87=AA=E9=80=82?= =?UTF-8?q?=E5=BA=94=E5=B1=8F=E5=B9=95=EF=BC=8C=E9=93=BA=E6=BB=A1=E5=8F=AF?= =?UTF-8?q?=E8=A7=86=E5=8C=BA=E5=9F=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/web/useAdaptiveXTable.ts | 64 ++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 src/hooks/web/useAdaptiveXTable.ts diff --git a/src/hooks/web/useAdaptiveXTable.ts b/src/hooks/web/useAdaptiveXTable.ts new file mode 100644 index 00000000..2e362635 --- /dev/null +++ b/src/hooks/web/useAdaptiveXTable.ts @@ -0,0 +1,64 @@ +/** + * 使表格自适应屏幕，铺满可视区域 + * @param setPropsFunctions [useXTable中返回的函数setProps],设计为列表是为了兼容一个页面有两个列表的情况 + * @param container 包裹XTable的容器名称，默认为ContentWrap + */ +export const useAdaptiveXTable = (setPropsFunctions: Function[], container = 'ContentWrap') => { + // 最终的表格高度 + const height = ref(0) + // header区域和tags区域的高度和 + const htHeight = ref(126) + // vxe-grid类名 + const vxeGridClassName = ref('.vxe-grid') + // 精确计算vxe表格所在cart的可用高度 + const getTableHeight = () => { + // 找到vxe(目的获取vex-grid所在el-cart的高度) + const vxeElement = document.querySelector(vxeGridClassName.value) + if (vxeElement) { + // ========== 计算容器可用高度(tag: 不使用元素获取的方式是怕类名有变化) ========== + // 父元素el-card__body(ContentWrap要获取两次parentElement因为还有一层div包裹) + let parent + if ('ContentWrap' === container) { + parent = vxeElement?.parentElement?.parentElement + } else { + parent = vxeElement?.parentElement + } + // 父元素的兄弟元素也就是el-card__header + const previous = parent?.previousElementSibling as HTMLElement + let previousHeight + // 如果有标题获取高度 + if (previous) { + previousHeight = previous?.offsetHeight + } + //获取浏览器窗口内容高度 + const vh = window.innerHeight + // 计算容器可用高度，如果有标题话减去标题占用的高度, 最后减去header区域和tags区域的高度 + height.value = (previousHeight && vh ? vh - previousHeight : vh) - htHeight.value + for (const setProps of setPropsFunctions) { + setProps({ height: height.value }) + } + } + } + const initOnresize = () => { + // 监听浏览器窗口变化重新计算高度 + window.onresize = () => { + getTableHeight() + } + getTableHeight() + } + onMounted(() => { + initOnresize() + }) + + //页面卸载之前干掉onresize + onBeforeUnmount(() => { + window.onresize = () => {} + }) + // 针对缓存了的页面 + onActivated(() => { + // 调用时机为首次挂载 + // 以及每次从缓存中被重新插入时,重新更新onresize和计算高度 + initOnresize() + }) + return { height } +} -- Gitee From 6fb5f6f59ef8c60ca9f044de8956b3046671d8e6 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Thu, 13 Apr 2023 16:43:29 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E4=BD=BF=E7=94=A8=20=3F.=E9=81=BF=E5=85=8D?= =?UTF-8?q?=E5=9C=A8=E8=A1=A8=E6=A0=BC=E5=AE=9E=E4=BE=8B=E4=B8=8D=E5=AD=98?= =?UTF-8?q?=E5=9C=A8=E5=87=BA=E7=8E=B0=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/web/useXTable.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/web/useXTable.ts b/src/hooks/web/useXTable.ts index 501f982b..e8911d7d 100644 --- a/src/hooks/web/useXTable.ts +++ b/src/hooks/web/useXTable.ts @@ -27,7 +27,7 @@ export const useXTable = (props: XTableProps): [Function, tableMethod] => { } const methods: tableMethod = { reload: () => getInstance().reload(), - setProps: (props) => getInstance().setProps(props), + setProps: (props) => getInstance()?.setProps(props), deleteData: (id: string | number) => getInstance().deleteData(id), deleteBatch: () => getInstance().deleteBatch(), exportList: (fileName?: string) => getInstance().exportList(fileName), -- Gitee From 7be96dea0bd16cabc0f1b9b0b1274dee70de97f1 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Thu, 13 Apr 2023 16:47:08 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9setProps=EF=BC=8C?= =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=B5=8B=E5=80=BC=E7=9A=84=E6=97=B6=E5=80=99?= =?UTF-8?q?=E4=BF=9D=E7=95=99=E6=97=A7=E5=80=BC=EF=BC=8C=E5=A6=82=E6=9E=9C?= =?UTF-8?q?=E6=9C=89=E6=96=B0=E7=9A=84=E5=80=BC=E5=88=99=E8=A6=86=E7=9B=96?= =?UTF-8?q?,=E5=8E=BB=E6=8E=89option.height=E4=BD=BF=E7=94=A8=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E8=AE=A1=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/XTable/src/XTable.vue | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/XTable/src/XTable.vue b/src/components/XTable/src/XTable.vue index fac292d4..1cbe69fa 100644 --- a/src/components/XTable/src/XTable.vue +++ b/src/components/XTable/src/XTable.vue @@ -1,11 +1,11 @@