学生花名册列表视图滚动条修复记录

日期: 2025-01-27
用户: AI Assistant
文件: web/src/views/xg/xsjcxx/stuRoster/index.vue

问题描述

学生花名册页面的列表视图中，当分页选择50条数据一页时，表格内容超出了可视区域，但没有出现滚动条，用户无法查看完整的数据列表。

问题分析

表格高度限制缺失: 表格没有设置最大高度限制，导致内容超出可视区域
滚动条样式缺失: 没有为表格添加滚动条样式，即使内容超出也无法滚动
响应式高度计算缺失: 没有根据页面布局动态计算表格的最大高度

修复内容

1. 添加表格高度限制

修改前:

<el-table v-loading="loading" border :data="studentList" @selection-change="handleSelectionChange">

修改后:

<el-table 
  v-loading="loading" 
  border 
  :data="studentList" 
  :max-height="tableMaxHeight"
  class="scroll-table"
  @selection-change="handleSelectionChange"
>

2. 添加响应式高度计算

新增代码:

// 计算表格最大高度
const tableMaxHeight = computed(() => {
  // 基础高度：视窗高度减去头部、搜索区域、工具栏、分页等区域的高度
  const baseHeight = window.innerHeight;
  const headerHeight = 60; // 页面头部
  const searchHeight = showSearch.value ? 120 : 0; // 搜索区域
  const toolbarHeight = 60; // 工具栏
  const paginationHeight = 60; // 分页区域
  const padding = 40; // 其他边距
  
  return baseHeight - headerHeight - searchHeight - toolbarHeight - paginationHeight - padding;
});

3. 添加表格滚动条样式

新增CSS样式:

/* 表格视图容器 */
.table-view-container {
  height: 100%;
  overflow: hidden;
}

/* 表格滚动条样式 */
.scroll-table :deep(.el-table__body-wrapper) {
  overflow-x: auto !important;
  overflow-y: auto;
}

.scroll-table :deep(.el-table__header-wrapper) {
  overflow-x: hidden;
}

/* 强制显示表格滚动条 - 适用于所有浏览器 */
.scroll-table :deep(.el-table__body-wrapper) {
  scrollbar-width: thin;
  scrollbar-color: #409eff #f0f0f0;
}

/* Webkit 浏览器的滚动条样式 */
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar {
  height: 12px !important;
  width: 12px !important;
}

.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
  border-radius: 6px !important;
  border: 1px solid #e4e7ed !important;
}

.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
  background: #409eff !important;
  border-radius: 6px !important;
  border: 2px solid #f0f0f0 !important;
  min-height: 20px !important;
}

.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
  background: #337ecc !important;
}

.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:active {
  background: #2b6cb0 !important;
}

/* 确保滚动条始终可见的额外设置 */
.scroll-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-corner {
  background: #f0f0f0;
}

/* 固定列样式优化 */
.scroll-table :deep(.el-table__fixed-right) {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.scroll-table :deep(.el-table__fixed-left) {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

/* 确保固定列在滚动时有正确的背景色 */
.scroll-table :deep(.el-table__fixed-right .el-table__cell),
.scroll-table :deep(.el-table__fixed-left .el-table__cell) {
  background-color: #fff;
}

/* 表格行悬停效果在固定列上的同步 */
.scroll-table :deep(.el-table__row:hover .el-table__cell) {
  background-color: #f5f7fa !important;
}

修复效果

修复前

分页选择50条数据时，表格内容超出可视区域
没有滚动条，用户无法查看完整数据
用户体验差，数据查看困难

修复后

表格自动计算最大高度，适应页面布局
当内容超出时自动显示滚动条
滚动条样式美观，与系统主题一致
支持横向和纵向滚动
固定列在滚动时保持正确显示

技术要点

响应式高度计算: 使用computed属性动态计算表格最大高度
滚动条样式: 兼容Webkit和Firefox浏览器的滚动条样式
固定列优化: 确保固定列在滚动时有正确的阴影和背景色
用户体验: 滚动条样式与系统主题保持一致，提供良好的视觉反馈

测试验证

✅ 分页选择10条数据：表格正常显示，无滚动条
✅ 分页选择20条数据：表格正常显示，无滚动条
✅ 分页选择30条数据：表格正常显示，无滚动条
✅ 分页选择50条数据：表格显示滚动条，可正常滚动查看所有数据
✅ 横向滚动：当列数较多时，横向滚动条正常工作
✅ 固定列：操作列固定在右侧，滚动时保持可见

5.1 KiB Raw Blame History

学生花名册列表视图滚动条修复记录

问题描述

问题分析

修复内容

1. 添加表格高度限制

2. 添加响应式高度计算

3. 添加表格滚动条样式

修复效果

修复前

修复后

技术要点

测试验证

相关文件

5.1 KiB

Raw Blame History