Browse Source

分页组件新增pagerCount属性

RuoYi 4 years ago
parent
commit
9d0240b831

+ 9 - 0
ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -105,6 +105,15 @@
105
 	position: absolute;
105
 	position: absolute;
106
 }
106
 }
107
 
107
 
108
+@media ( max-width : 768px) {
109
+  .pagination-container .el-pagination > .el-pagination__jump {
110
+    display: none !important;
111
+  }
112
+  .pagination-container .el-pagination > .el-pagination__sizes {
113
+    display: none !important;
114
+  }
115
+}
116
+
108
 .el-table .fixed-width .el-button--mini {
117
 .el-table .fixed-width .el-button--mini {
109
 	padding-left: 0;
118
 	padding-left: 0;
110
 	padding-right: 0;
119
 	padding-right: 0;

+ 6 - 0
ruoyi-ui/src/components/Pagination/index.vue

@@ -6,6 +6,7 @@
6
       :page-size.sync="pageSize"
6
       :page-size.sync="pageSize"
7
       :layout="layout"
7
       :layout="layout"
8
       :page-sizes="pageSizes"
8
       :page-sizes="pageSizes"
9
+      :pager-count="pagerCount"
9
       :total="total"
10
       :total="total"
10
       v-bind="$attrs"
11
       v-bind="$attrs"
11
       @size-change="handleSizeChange"
12
       @size-change="handleSizeChange"
@@ -38,6 +39,11 @@ export default {
38
         return [10, 20, 30, 50]
39
         return [10, 20, 30, 50]
39
       }
40
       }
40
     },
41
     },
42
+    // 移动端页码按钮的数量端默认值5
43
+    pagerCount: {
44
+      type: Number,
45
+      default: document.body.clientWidth < 992 ? 5 : 7
46
+    },
41
     layout: {
47
     layout: {
42
       type: String,
48
       type: String,
43
       default: 'total, sizes, prev, pager, next, jumper'
49
       default: 'total, sizes, prev, pager, next, jumper'