feat(DynamicTable): [auto-height]修改表格自适应高度，可以根据指定父容器去做自适应

src/components/core/dynamic-table/src/dynamic-table.ts

@@ -76,7 +76,7 @@ export const dynamicTableProps = {
   /** 表格标题提示信息 */
   titleTooltip: String as PropType<string>,
   /** 表格自适应高度 */
-  autoHeight: Boolean as PropType<boolean>,
+  autoHeight: Boolean as PropType<boolean | string>,
   // excel导出配置
   /** 导出的文件名 */
   exportFileName: {

src/components/core/dynamic-table/src/hooks/useScroll.ts

@@ -1,5 +1,5 @@
 import { computed, ref, type Ref } from 'vue';
-import { debounce } from 'lodash-es';
+import { debounce, isBoolean, isString } from 'lodash-es';
 import { useMutationObserver, useResizeObserver } from '@vueuse/core';
 import type { DynamicTableProps } from '../dynamic-table';
 
@@ -10,11 +10,17 @@ type UseScrollParams = {
 
 export type UseScrollType = ReturnType<typeof useScroll>;
 
+// 传入的元素是否有position属性
+const hasPosition = (divElement: HTMLDivElement) => {
+  return divElement instanceof HTMLDivElement && divElement.style.position !== '';
+};
+
 // 获取元素到顶部距离-通用方法
-export const getPositionTop = (node: HTMLElement) => {
+export const getPositionTop = (node: HTMLElement, stopElement?: HTMLDivElement) => {
   let top = node.offsetTop;
   let parent = node.offsetParent as HTMLElement;
-  while (parent != null) {
+
+  while (parent != null && (!stopElement || parent !== stopElement)) {
     top += parent.offsetTop;
     parent = parent.offsetParent as HTMLElement;
   }
@@ -44,8 +50,19 @@ export const useScroll = ({ props, containerElRef }: UseScrollParams) => {
       containerElRef.value.querySelector<HTMLDivElement>('.ant-table-body') ||
       containerElRef.value.querySelector<HTMLDivElement>('.ant-table-tbody');
     if (bodyEl) {
-      const rootElHeight = document.documentElement.offsetHeight;
-      const posTopHeight = getPositionTop(bodyEl as HTMLDivElement);
+      let rootElHeight = document.documentElement.offsetHeight;
+      let posTopHeight = getPositionTop(bodyEl as HTMLDivElement);
+      if (!isBoolean(props.autoHeight) && isString(props.autoHeight)) {
+        const el: HTMLDivElement = document.querySelector<HTMLDivElement>(
+          props.autoHeight,
+        ) as HTMLDivElement;
+        if (!hasPosition(el)) {
+          el.style.position = 'relative';
+        }
+
+        rootElHeight = el.offsetHeight;
+        posTopHeight = getPositionTop(bodyEl as HTMLDivElement, el);
+      }
       const scrollbarHeight = bodyEl.offsetHeight - bodyEl.clientHeight;
       const y = rootElHeight - posTopHeight - scrollbarHeight - paginationHeight - 8;
       scrollY.value = y;

src/router/router-guards.ts

@@ -35,7 +35,7 @@ export function createRouterGuards(router: Router, whiteNameList: WhiteNameList)
           }
           // 解决警告：No match found for location with path "XXXXXXX"
           if (to.name === PAGE_NOT_FOUND_NAME) {
-            next({ path: to.fullPath, replace: true });
+            next({ path: to.fullPath, query: to.query, replace: true });
           }
           // 如果该路由不存在，可能是动态注册的路由，它还没准备好，需要再重定向一次到该路由
           else if (!hasRoute) {

src/views/system/monitor/log/login/index.vue

@@ -1,14 +1,20 @@
 <template>
-  <DynamicTable
-    header-title="登录日志"
-    auto-height
-    :data-request="Api.systemLog.logLoginLogPage"
-    :columns="columns"
-  />
+  <div id="auto-height" style="height: 80%">
+    <DynamicTable
+      header-title="登录日志"
+      auto-height="#auto-height"
+      :data-request="Api.systemLog.logLoginLogPage"
+      :columns="columns"
+    />
+  </div>
+
+  <Alert style="margin-top: 20px" message="表格自适应指定容器高度" type="info" show-icon>
+    <template #description> 表格自适应指定容器高度 </template>
+  </Alert>
 </template>
 
 <script setup lang="tsx">
-  import { Tag } from 'ant-design-vue';
+  import { Tag, Alert } from 'ant-design-vue';
   import type { TableColumn } from '@/components/core/dynamic-table';
   import { useTable } from '@/components/core/dynamic-table';
   import Api from '@/api/';