分页组件样式调整

src/views/cxyrd/QueryConfirm.vue

@@ -328,17 +328,25 @@
         </el-table>
       </div>
     </div>
-    <div class="confirm_footer_page">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrPageChange"
-        :current-page="reqParam.page.currPage"
-        :page-sizes="[3, 6, 10, 20, 50, 100, 500]"
-        :page-size="reqParam.page.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="reqParam.page.total"
+    <div class="footer">
+      <span class="count"
+        >共{{ reqParam.page.total }} 条记录 第{{ reqParam.page.currPage }}/{{
+          Tpage
+        }}页</span
       >
-      </el-pagination>
+      <div class="page">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrPageChange"
+          :current-page="reqParam.page.currPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="reqParam.page.pageSize"
+          layout="sizes,prev, pager, next"
+          :total="reqParam.page.total"
+        >
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -355,7 +363,7 @@ export default {
       reqParam: {
         page: {
           total: 0,
-          pageSize: 6,
+          pageSize: 10,
           currPage: 1
         },
         contrastCustomSearchReq: {
@@ -425,7 +433,7 @@ export default {
       ],
       queryStateBtns: [
         { value: "0", name: "等待比对", type: "querystates" },
-        { value: "1", name: "正在对比", type: "querystates" },
+        { value: "1", name: "正在比对", type: "querystates" },
         { value: "11", name: "正在认定", type: "querystates" },
         { value: "20", name: "认定完成", type: "querystates" },
         { value: "21", name: "正在复核", type: "querystates" },
@@ -440,6 +448,7 @@ export default {
     };
   },
   watch: {
+    // 批量处理
     checkedProps(val) {
       this.tableProps = this.defaultTableProps.filter(
         i => val.indexOf(i.prop) >= 0
@@ -448,6 +457,14 @@ export default {
       this.key = this.key + 1; //为了保证table 每次都会重渲，这样做体验感更好，如果不为table设置key值的话，用户一旦选中了复选框选项，就是在原来table基础上添加删除每一列，页面就有跳动的感觉，体验感不好
     }
   },
+  computed: {
+    // 计算总页数
+    Tpage() {
+      return (
+        Math.floor(this.reqParam.page.total / this.reqParam.page.pageSize) + 1
+      );
+    }
+  },
   methods: {
     // 获取认定列表
     search() {
@@ -487,6 +504,7 @@ export default {
       );
       this.search();
     },
+    // 清空用户id
     clearUser() {
       this.reqParam.contrastCustomSearchReq.userid = null;
     },
@@ -550,7 +568,7 @@ export default {
         return row[prop];
       }
     },
-    //   优先级格式化
+    // 优先级格式化
     queryClassFormat(row, colnum) {
       let prop = colnum.property;
       let showProp = null;
@@ -1048,7 +1066,33 @@ const setQueryClass = [
   { queryclass: "5", name: "最低" }
 ];
 </script>
-<style lang="scss">
+<style scoped lang="scss">
+/deep/.el-pager {
+  .number {
+    background-color: transparent;
+  }
+  .number.active {
+    background-color: #055fe7 !important;
+    box-shadow: 0px 12px 16px 1px rgba(0, 21, 51, 0.03);
+    border-radius: 6px;
+  }
+  .el-icon.more.btn-quicknext.el-icon-more,
+  .el-icon.more.btn-quickprev.el-icon-more {
+    background-color: transparent !important;
+  }
+}
+/deep/ .btn-prev,
+/deep/.btn-next {
+  background-color: transparent !important;
+}
+/deep/ .el-pagination__sizes {
+  position: fixed;
+  right: 34px;
+}
+/deep/ .btn-next {
+  // margin-right: 120px;
+}
+
 .el-dropdown-menu {
   width: 120px;
   height: 288px;
@@ -1270,11 +1314,14 @@ b {
   width: 100%;
   height: 500px;
 }
-.confirm_footer_page {
+.footer {
+  width: calc(100vw - 388px);
   position: absolute;
-  right: 48px;
-  bottom: 24px;
-  height: 34px;
+  bottom: 27px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
 </style>
 <!--table树-->