Browse Source

🐞 fix: 修复移动端表格展示异常的问题

Pchen. 3 weeks ago
parent
commit
b7a055b34a
2 changed files with 91 additions and 0 deletions
  1. 68 0
      src/styles/store-theme.less
  2. 23 0
      src/utils/tablePagination.js

+ 68 - 0
src/styles/store-theme.less

@@ -259,6 +259,74 @@
     justify-content: flex-start !important;
     text-align: left !important;
   }
+
+  // 表格底部分页:换行展示,隐藏跳页,避免超出卡片
+  .arco-table-pagination {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 10px 0 4px;
+    box-sizing: border-box;
+
+    .arco-pagination {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      row-gap: 8px;
+      column-gap: 6px;
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+    }
+
+    .arco-pagination-total {
+      order: 1;
+      flex: 0 0 100%;
+      width: 100%;
+      margin-right: 0 !important;
+      text-align: center;
+      justify-content: center;
+      line-height: 0.8;
+      color: #666;
+    }
+
+    .arco-pagination-list {
+      order: 2;
+      flex: 1 1 auto;
+      max-width: 100%;
+      margin: 0 !important;
+      justify-content: center;
+      flex-wrap: wrap;
+      row-gap: 4px;
+    }
+
+    .arco-pagination-options {
+      order: 3;
+      flex: 0 0 100%;
+      width: 100%;
+      margin-left: 0 !important;
+      padding-left: 0 !important;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .arco-pagination-jumper {
+      display: none !important;
+    }
+
+    .arco-pagination-item,
+    .arco-pagination-item-previous,
+    .arco-pagination-item-next {
+      min-width: 28px;
+    }
+
+    .arco-select-view-single {
+      max-width: min(100%, 140px);
+    }
+  }
 }
 
 @media (max-width: @app-breakpoint-lg) {

+ 23 - 0
src/utils/tablePagination.js

@@ -0,0 +1,23 @@
+/**
+ * 表格分页默认项(桌面端展示完整控件;移动端由 store-theme.less 隐藏跳页并换行)
+ */
+export const TABLE_PAGINATION_UI = {
+  showTotal: true,
+  showPageSize: true,
+  showJumper: true
+}
+
+/**
+ * 合并分页状态与 UI 配置,供 a-table :pagination 使用
+ * @param {{ pagesize: number, current: number, total: number }} state
+ * @param {Record<string, unknown>} [extra]
+ */
+export function buildTablePagination(state, extra = {}) {
+  return {
+    ...TABLE_PAGINATION_UI,
+    pageSize: state.pagesize,
+    current: state.current,
+    total: state.total,
+    ...extra
+  }
+}