成绩单、选项明细设置表格高度

src/views/analysis/optionDetail.vue

@@ -41,7 +41,8 @@
         :data="state.tableData"
         border
         stripe
-        height="500"
+        ref="tableRef"
+        :height="state.tableHeight"
         v-loading="state.tableLoading"
         :element-loading-text="state.loadingText"
         :element-loading-spinner="loadingSvgIcon"
@@ -115,8 +116,16 @@ import { useAnalysisStore } from "@/store/analysis";
 import { Search } from "@element-plus/icons-vue";
 import { downloadExcel } from "@/utils/exportExcel";
 import { loadingSvgIcon } from "@/utils/common";
-import { onMounted, reactive, ref, computed, watch } from "vue";
-
+import {
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  computed,
+  nextTick,
+  watch,
+} from "vue";
+import { throttle } from "lodash";
 interface TableColumn {
   prop: string;
   label: string;
@@ -145,13 +154,14 @@ interface PaperInfo {
 
 interface State {
   keyWord: string;
+  tableHeight: Number;
   tableData: any[];
   staticHeaderData: TableColumn[];
   answerDataTitle: TableColumn[];
   tableCount: TableCount;
   pageInfo: PageInfo;
   tableLoading: boolean; // 修复：使用小写 boolean
-  loadingText: string;   // 修复：使用小写 string
+  loadingText: string; // 修复：使用小写 string
   paperInfo: PaperInfo;
   paperTitle: string;
   showStudentPaperDialog: boolean;
@@ -161,9 +171,11 @@ const analysisStore = useAnalysisStore();
 const getExamName = computed(() => {
   return analysisStore.analysisExamInfo.examName || "";
 });
+const tableRef = ref<any>(null);
 const reportModuleRef = ref<any>(null);
 const state = reactive<State>({
   keyWord: "",
+  tableHeight: 1000, //表格高度
   tableData: [],
   staticHeaderData: [],
   answerDataTitle: [],
@@ -227,7 +239,7 @@ const GetTableCount = async () => {
 };
 
 /** 获取表格数据 */
-const GetTableData = async () => {
+const GetTableData = async (isInit: boolean = false) => {
   if (!analysisStore.filterObject) return;
   try {
     state.tableLoading = true;
@@ -244,9 +256,17 @@ const GetTableData = async () => {
       state.tableData = res.data?.listData || [];
       state.pageInfo.total = Number(res.data?.total || 0);
     }
-    state.tableLoading = false;
   } catch (err) {
     console.error("获取表格数据失败：", err);
+  } finally {
+    state.tableLoading = false;
+    // 数据加载完成后重置滚动
+    nextTick(() => {
+      TableScrollTop();
+      if (isInit) {
+        SetTableHeight();
+      }
+    });
   }
 };
 
@@ -296,13 +316,14 @@ const ExportExcel = () => {
 };
 
 //打开答题卡弹窗
-const OpenStudentPaper = (row: any) => { // 修复：移除多余的 prop 参数，添加 row 类型
+const OpenStudentPaper = (row: any) => {
+  // 修复：移除多余的 prop 参数，添加 row 类型
   state.paperInfo = {
     examPaperId: analysisStore.filterObject?.subjectId || "", // 修复：增加可选链和默认值
     platformNumber: row.studentRegistrationCode, //学籍号平台号
     questionId: "", //题目id
   };
-  state.paperTitle = `${getExamName.value}-${analysisStore.filterObject?.subjectName || ''}-${row.className}-${row.studentUserName}`; //学生姓名
+  state.paperTitle = `${getExamName.value}-${analysisStore.filterObject?.subjectName || ""}-${row.className}-${row.studentUserName}`; //学生姓名
   state.showStudentPaperDialog = true;
 };
 
@@ -316,26 +337,74 @@ const HandleSearch = () => {
   state.pageInfo.pageNum = 1;
   GetTableData();
 };
+// 表格内容滚动置顶
+const TableScrollTop = () => {
+  const el = tableRef.value?.$el;
+  if (!el) return;
+
+  // 在下一帧执行，确保 DOM 已更新
+  requestAnimationFrame(() => {
+    // 尝试多种选择器，兼容不同版本
+    const scrollWrap =
+      el.querySelector(".el-scrollbar__wrap") ||
+      el.querySelector(".el-table__body-wrapper") ||
+      el.querySelector(".el-table__fixed-body-wrapper");
 
+    if (scrollWrap) {
+      scrollWrap.scrollTop = 0;
+      scrollWrap.scrollLeft = 0;
+    } else {
+      // 若仍未找到，延迟再试一次（表格可能尚未完全渲染）
+      setTimeout(() => {
+        const retry =
+          el.querySelector(".el-scrollbar__wrap") ||
+          el.querySelector(".el-table__body-wrapper");
+        if (retry) {
+          retry.scrollTop = 0;
+          retry.scrollLeft = 0;
+        }
+      }, 200);
+    }
+  });
+};
+// 设置表格高度
+const SetTableHeight = () => {
+  const container = document.getElementsByClassName("report_content")?.[0];
+  if (container) {
+    const gap = state.pageInfo.total > state.pageInfo.pageSize ? 152 : 100;
+    state.tableHeight = container.clientHeight - gap;
+  }
+};
+// 窗口大小改变事件
+const HandleResize = throttle(() => {
+  SetTableHeight();
+}, 200);
 // 初始化
 const PageInit = () => {
+  state.pageInfo.pageNum = 1;
   GetStudentTranscriptTitle();
   GetTableCount();
-  GetTableData();
+  GetTableData(true);
 };
 
 // 监听筛选条件
 watch(
   () => analysisStore.filterObject,
-  () => { // 修复：移除不必要的 async
+  () => {
+    // 修复：移除不必要的 async
     PageInit();
   },
   { deep: true },
 );
 
 onMounted(() => {
+  window.addEventListener("resize", HandleResize);
   PageInit();
 });
+onUnmounted(() => {
+  // 移除监听 防止内存泄漏
+  window.removeEventListener("resize", HandleResize);
+});
 </script>
 
 <style lang="scss" scoped>

src/views/analysis/score.vue

@@ -212,7 +212,7 @@ const getExamName = computed(() => {
 const state = reactive<State>({
   keyWord: "",
   checkList: ["group"],
-  tableHeight: 500, //表格高度
+  tableHeight: 1000, //表格高度
   tableData: [],
   staticHeaderData: [],
   groupDataTitleData: [],
@@ -280,7 +280,7 @@ const GetTableCount = async () => {
 };
 
 /** 获取表格数据 */
-const GetTableData = async () => {
+const GetTableData = async (isInit: boolean = false) => {
   if (!analysisStore.filterObject) return;
   try {
     state.tableLoading = true;
@@ -302,7 +302,12 @@ const GetTableData = async () => {
   } finally {
     state.tableLoading = false;
     // 数据加载完成后重置滚动
-    nextTick(() => TableScrollTop());
+    nextTick(() => {
+      TableScrollTop()
+      if(isInit){
+        SetTableHeight();
+      }
+    });
   }
 };
 //获取序号
@@ -404,7 +409,8 @@ const TableScrollTop = () => {
 const SetTableHeight = () => {
   const container = document.getElementsByClassName("report_content")?.[0];
   if (container) {
-    state.tableHeight = container.clientHeight - 152;
+    const gap = state.pageInfo.total > state.pageInfo.pageSize ? 152 : 102;
+    state.tableHeight = container.clientHeight - gap;
   }
 };
 // 窗口大小改变事件
@@ -416,7 +422,7 @@ const PageInit = () => {
   state.pageInfo.pageNum = 1;
   GetStudentTranscriptTitle();
   GetTableCount();
-  GetTableData();
+  GetTableData(true);
 };
 
 // 监听筛选条件
@@ -431,11 +437,6 @@ watch(
 onMounted(() => {
   window.addEventListener("resize", HandleResize);
   PageInit();
-  nextTick(() => {
-    setTimeout(() => {
-      SetTableHeight();
-    }, 500);
-  });
 });
 onUnmounted(() => {
   // 移除监听 防止内存泄漏