Quellcode durchsuchen

fix(admin): 商品管理列表撑满视口并消除多级滚动条

- 页根接入 .admin-page 弹性撑满链,卡片占满视口高度
- 表格改用 height=100% + flex:1,仅保留表格自身滚动条
- 移除 JS 计算 tableHeight 及 window.resize 监听
liaoxg vor 5 Tagen
Ursprung
Commit
0588b17666
1 geänderte Dateien mit 11 neuen und 15 gelöschten Zeilen
  1. 11 15
      cfc-web/src/views/admin/ProductManage.vue

+ 11 - 15
cfc-web/src/views/admin/ProductManage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="product-manage">
+  <div class="product-manage admin-page">
     <el-card class="pm-card" shadow="never">
       <!-- 页面标题区:唯一主操作「新增商品」,其余降为次按钮 -->
       <div class="pm-header">
@@ -83,7 +83,7 @@
       <div class="pm-table-wrap">
         <el-table
           ref="table"
-          :max-height="tableHeight"
+          height="100%"
           :data="list"
           v-loading="loading"
           border
@@ -322,7 +322,6 @@ export default {
     return {
       list: [],
       loading: false,
-      tableHeight: 480,
       filters: {
         keyword: '',
         status: '',
@@ -347,19 +346,9 @@ export default {
     }
   },
   mounted() {
-    this.calcTableHeight()
-    window.addEventListener('resize', this.calcTableHeight)
     this.loadList()
   },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.calcTableHeight)
-  },
   methods: {
-    calcTableHeight() {
-      // 页面留白 24*2 + 卡片内边距 24*2 + 头部 32 + 筛选区 56 + 分页 56 ≈ 基准 300
-      const offset = this.selectedIds.length ? 336 : 300
-      this.tableHeight = Math.max(320, window.innerHeight - offset)
-    },
     async loadList() {
       this.loading = true
       try {
@@ -522,12 +511,10 @@ export default {
     },
     handleSelectionChange(rows) {
       this.selectedIds = rows.map(r => r.id)
-      this.calcTableHeight()
     },
     clearSelection() {
       this.selectedIds = []
       if (this.$refs.table) this.$refs.table.clearSelection()
-      this.calcTableHeight()
     }
   }
 }
@@ -659,7 +646,16 @@ export default {
 }
 
 /* ---------- 表格 ---------- */
+.pm-table-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .pm-table-wrap /deep/ .el-table {
+  flex: 1;
+  min-height: 0;
   font-size: 14px;
   border-radius: 6px;
 }