新增hooks函数useAdaptiveXTable使表格自适应屏幕，铺满可视区域

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 }
+}