显示修改

back-ui/src/views/dz/papers/components/plugs/student-list-dialog.vue

@@ -2,19 +2,20 @@
     <!-- 学生列表弹窗 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1200px" destroy-on-close>
         <div class="student-table-container">
-            <el-table 
-                v-loading="loading" 
-                :data="studentList" 
-                stripe
-                height="calc(100vh - 350px)"
-                style="width: 100%"
-            >
-                <el-table-column label="姓名-手机" prop="namePhone" min-width="180" align="center"/>
-                <el-table-column label="卡号" prop="cardNo" min-width="120" align="center"/>
+            <div class="table-wrapper">
+                <el-table 
+                    v-loading="loading" 
+                    :data="studentList" 
+                    stripe
+                    :height="tableHeight"
+                    style="width: 100%"
+                >
+                <el-table-column label="姓名-手机" prop="namePhone" min-width="160" align="center"/>
+                <el-table-column label="卡号" prop="cardNo" min-width="90" align="center"/>
                 <el-table-column label="注册学校" prop="registerSchool" min-width="120" align="center" show-overflow-tooltip/>
-                <el-table-column label="学校班级" prop="registerClass" min-width="80" align="center" show-overflow-tooltip/>
+                <el-table-column label="学校班级" prop="registerClass" min-width="90" align="center" show-overflow-tooltip/>
                 <el-table-column label="培训校区" prop="trainSchool" min-width="120" align="center" show-overflow-tooltip/>
-                <el-table-column label="校区班级" prop="trainClass" min-width="80" align="center" show-overflow-tooltip/>
+                <el-table-column label="校区班级" prop="trainClass" min-width="90" align="center" show-overflow-tooltip/>
                 <el-table-column label="考生类型" prop="examType" min-width="150" align="center">
                     <template #default="scope">
                         <template v-if="scope.row && scope.row.examType && exam_type">
@@ -44,7 +45,8 @@
                 <el-table-column label="单招年份" prop="year" min-width="80" align="center"/>
                 <el-table-column label="省份" prop="province" min-width="80" align="center"/>
                 <el-table-column label="机构" prop="institution" min-width="150" align="center" show-overflow-tooltip/>
-            </el-table>
+                </el-table>
+            </div>
             
             <!-- 前端分页 -->
             <div class="student-pagination">
@@ -82,7 +84,7 @@
 </template>
 
 <script setup name="StudentListDialog">
-import { ref, getCurrentInstance } from 'vue'
+import { ref, computed, getCurrentInstance } from 'vue'
 import { ElMessage } from 'element-plus'
 import { getClassesBuildStatsDetail } from '@/api/dz/papers.js'
 import DictTag from '@/components/DictTag/index.vue'
@@ -90,6 +92,11 @@ import DictTag from '@/components/DictTag/index.vue'
 const { proxy } = getCurrentInstance()
 const { exam_type } = proxy.useDict("exam_type")
 
+// 计算表格高度：视口高度 - 弹窗头部和padding(约200px) - 分页组件高度(约70px)
+const tableHeight = computed(() => {
+    return 'calc(100vh - 270px)'
+})
+
 // Props
 const props = defineProps({
     // 统计类型映射，用于显示标题
@@ -299,6 +306,20 @@ defineExpose({
     max-height: calc(100vh - 300px);
 }
 
+.table-wrapper {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.table-wrapper :deep(.el-table) {
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+}
+
 .student-pagination {
     margin-top: 20px;
     text-align: right;