奶品管理销售管理固定表头

src/views/dairyProducts/sheepMilkAnalysis/index.vue

@@ -67,17 +67,19 @@
       <el-button type="success" icon="Download" @click="handleExport">导出</el-button>
     </div>
 
-    <el-table :data="list" border style="width: 100%" v-loading="loading" :row-key="row => row.sheepId">
-      <el-table-column
-        v-for="col in visibleColumns"
-        :key="col.prop"
-        :label="col.label"
-        :prop="col.prop"
-        :min-width="col.minWidth || 120"
-        :sortable="col.sortable || false" 
-        :formatter="col.formatter || undefined"
-      />
-    </el-table>
+    <div class="table-wrapper">
+      <el-table :data="list" border style="width: 100%" v-loading="loading" :row-key="row => row.sheepId" height="100%">
+        <el-table-column
+          v-for="col in visibleColumns"
+          :key="col.prop"
+          :label="col.label"
+          :prop="col.prop"
+          :min-width="col.minWidth || 120"
+          :sortable="col.sortable || false" 
+          :formatter="col.formatter || undefined"
+        />
+      </el-table>
+    </div>
 
     <el-pagination
       v-show="total > 0"
@@ -288,4 +290,31 @@ export default {
   background-color: #f5f7fa;
   border-radius: 4px;
 }
+
+/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
+.app-container {
+  /* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
+     如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
+  height: calc(100vh - 84px); 
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
+.el-form, 
+.mb8, 
+.applied-filters, 
+.pagination-container {
+  flex-shrink: 0;
+}
+
+/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
+.table-wrapper {
+  flex: 1; /* 占据所有剩余空间 */
+  min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
 </style>