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

src/views/dairyProducts/dryMatterCorrection/index.vue

@@ -69,11 +69,13 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
+    <div class="table-wrapper">
       <el-table 
         v-loading="loading" 
         :data="dryMatterCorrectionList" 
         @selection-change="handleSelectionChange"
-      style="width: 100%">
+        style="width: 100%"
+        height="100%">
         <el-table-column type="selection" align="center" />
         <el-table-column label="年月" align="center" prop="datetime" sortable>
           <template #default="scope">
@@ -99,6 +101,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -373,4 +376,31 @@ getList()
 .el-form-item {
   margin-bottom: 15px;
 }
+
+/* 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>

src/views/dairyProducts/freshMilkTest/freshMilkTest/index.vue

@@ -75,7 +75,8 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="freshMilkTestList" @selection-change="handleSelectionChange">
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="freshMilkTestList" @selection-change="handleSelectionChange" height="100%">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column 
           label="来源" 
@@ -195,6 +196,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -642,4 +644,32 @@ onMounted(() => {
 .el-dialog__body {
   padding: 15px 20px;
 }
+
+
+/* 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>

src/views/dairyProducts/milkInOutStore/milkInOutStore/index.vue

@@ -49,7 +49,8 @@
       </template>
     </el-dialog>
 
-    <el-table :data="rows" border style="margin-top:16px" v-loading="loading">
+    <div class="table-wrapper">
+      <el-table :data="rows" border style="margin-top:16px" v-loading="loading" height="100%">
         <el-table-column prop="datetime" label="日期" width="120" sortable fixed="left">
           <template #default="{ row }">
             {{ row.datetime ? row.datetime.substring(0, 10) : '' }}
@@ -79,6 +80,7 @@
         <el-table-column prop="returnFresh" label="爱特退回鲜奶" sortable width="140" />
         <el-table-column prop="returnYogurt" label="爱特退回酸奶" sortable width="140" />
       </el-table>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -221,4 +223,32 @@ onMounted(() => {
 .mb-4 {
   margin-bottom: 16px;
 }
+
+
+/* 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>

src/views/dairyProducts/milkProdclasses/milkProdclasses/index.vue

@@ -93,7 +93,8 @@
       </el-col>
     </el-row>
 
-    <el-table :data="tableData" v-loading="loading">
+    <div class="table-wrapper">
+      <el-table :data="tableData" v-loading="loading" height="100%">
         <el-table-column prop="datetime" label="日期" width="110" sortable>
           <template #default="{ row }">
             {{ parseTime(row.datetime, '{y}-{m}-{d}') }}
@@ -116,6 +117,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <pagination v-show="total>0" :total="total"
                 v-model:page="queryParams.pageNum"
@@ -315,4 +317,32 @@ getList();
   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>

src/views/dairyProducts/parityCorrection/index.vue

@@ -48,7 +48,8 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="parityCorrectionList" @selection-change="handleSelectionChange">
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="parityCorrectionList" @selection-change="handleSelectionChange" height="100%">
         <el-table-column type="selection" width="55" align="center" />
         
         <el-table-column label="胎次" align="center" prop="parity" sortable />
@@ -61,6 +62,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -215,3 +217,32 @@ function handleDelete(row) {
 
 getList()
 </script>
+
+<style scoped>
+/* 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>

src/views/dairyProducts/rawMilkTest/rawMilkTest/index.vue

@@ -75,7 +75,8 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="rawMilkTestList" @selection-change="handleSelectionChange">
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="rawMilkTestList" @selection-change="handleSelectionChange" height="100%">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="检测日期" align="center" prop="datetime" width="180" v-if="visibleColumns.datetime" sortable>
           <template #default="scope">
@@ -116,6 +117,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -521,3 +523,32 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style scoped>
+/* 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>

src/views/dairyProducts/sheepMilkAnalysis/index.vue

@@ -67,7 +67,8 @@
       <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">
+    <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"
@@ -78,6 +79,7 @@
           :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>

src/views/dairyProducts/weightCorrection/index.vue

@@ -69,7 +69,8 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="weightCorrectionList" @selection-change="handleSelectionChange">
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="weightCorrectionList" @selection-change="handleSelectionChange" height="100%">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="日期" align="center" prop="datetime" width="180" sortable>
           <template #default="scope">
@@ -95,6 +96,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -324,4 +326,32 @@ getList()
 .el-form-item {
   margin-bottom: 15px;
 }
+
+
+/* 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>

src/views/dairyProducts/yogurtTest/yogurtTest/index.vue

@@ -75,7 +75,8 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="yogurtTestList" @selection-change="handleSelectionChange">
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="yogurtTestList" @selection-change="handleSelectionChange" height="100%">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column 
           label="来源" 
@@ -195,6 +196,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -644,4 +646,31 @@ onMounted(() => {
 .el-dialog__body {
   padding: 15px 20px;
 }
+
+/* 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>

src/views/sale/customer/index.vue

@@ -70,7 +70,8 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" @sort-change="handleSortChange" height="100%">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="客户名称" align="center" prop="name" />
         <el-table-column label="客户电话" align="center" prop="phone" sortable="custom" />
@@ -100,6 +101,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -346,3 +348,32 @@ function handleExport() {
   }, `customer_${new Date().getTime()}.xlsx`)
 }
 </script>
+
+<style scoped>
+/* 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>

src/views/sale/saleRecord/saleRecord/index.vue

@@ -180,7 +180,8 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
     </el-row>
 
-    <el-table v-loading="loading" :data="saleRecordList" @selection-change="handleSelectionChange" style="width: 100%">
+    <div class="table-wrapper">
+      <el-table v-loading="loading" :data="saleRecordList" @selection-change="handleSelectionChange" style="width: 100%" height="100%">
         <el-table-column type="selection" width="55" align="center" fixed="left"/>
         <el-table-column label="耳号" align="center" prop="bsManageTags" width="120" fixed="left" show-overflow-tooltip />
         <el-table-column label="品种" align="center" prop="variety" width="100" show-overflow-tooltip />
@@ -237,6 +238,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
@@ -815,4 +817,31 @@ function diseaseTypeFormat(row) {
   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>