Kaynağa Gözat

fix(web): 活动列表滚动容器统一用overflow:auto消除分页导致的宽度抖动

Xiaogang Liao 2 ay önce
ebeveyn
işleme
cda50d6c89

+ 2 - 4
cfc-web/src/views/admin/Activities.vue

@@ -57,9 +57,8 @@
         <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
         <el-button size="mini" @click="resetSearch">重置</el-button>
       </div>
-      <div class="table-scroll-wrap-lg">
-        <div style="overflow-x:auto;max-height:calc(100vh - 300px);min-width:0;">
-        <el-table style="max-height:calc(100vh - 300px);" :data="activities" v-loading="loading" border stripe>
+      <div style="overflow:auto;max-height:calc(100vh - 300px);min-width:0;box-sizing:border-box;">
+        <el-table :data="activities" v-loading="loading" border stripe style="min-width:900px;">
         <el-table-column prop="id" label="ID" width="80" />
         <el-table-column label="封面" width="80">
           <template slot-scope="{ row }">
@@ -111,7 +110,6 @@
           </template>
         </el-table-column>
         </el-table></div>
-      </div>
       <el-pagination
         v-if="total > 0"
         @size-change="handleSizeChange"

+ 2 - 3
cfc-web/src/views/admin/ActivityReview.vue

@@ -23,8 +23,7 @@
           <el-button size="mini" @click="resetSearch">重置</el-button>
         </div>
       </div>
-      <div class="table-scroll-wrap">
-        <div style="overflow-x:auto;max-height:calc(100vh - 300px);min-width:0;">
+      <div style="overflow:auto;max-height:calc(100vh - 300px);min-width:0;box-sizing:border-box;">
         <el-table :data="pendingActivities" v-loading="loading" border stripe style="min-width:900px;">
       <el-table-column prop="id" label="ID" width="80" />
       <el-table-column prop="title" label="活动标题" min-width="200" show-overflow-tooltip />
@@ -55,7 +54,7 @@
             <span v-else class="no-op">—</span>
           </template>
       </el-table-column>
-    </el-table></div></div>
+    </el-table></div>
     <el-pagination
         v-if="total > 0"
         @current-change="handlePageChange"