分页器优化

src/components/myPagination/index.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="pagination">
-        <button style="background-color: #ffff">共 {{ totalPage }} 条</button>
-        <el-select v-model="currentpageSize" placeholder="请选择" style="width: 100px;" size="mini" @change="changesize">
+        <button style="background-color: #ffff">共 {{ total }} 条</button>
+        <el-select v-model="currentpageSize" placeholder="请选择" style="width: 100px;margin-right:16px" size="mini"
+            @change="changesize">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
         </el-select>
@@ -12,7 +13,7 @@
             @mouseenter="onMouseenter('left')" @mouseleave="quickprevIconClass = 'el-icon-more'">
         </button>
         <template v-for="(item, index) in totalPage">
-            <button :class="{ active: currentPage === item }" :key="index"
+            <button :class="{ active: Number(currentPage) === item }" :key="index"
                 v-if="item >= startEnd.start && item <= startEnd.end" @click="updateCPage(item)">{{ item }}</button>
         </template>
         <button v-if="startEnd.end < totalPage - 1" icon="el-icon-more"
@@ -22,6 +23,12 @@
         </button>
         <button v-if="startEnd.end < totalPage" @click="updateCPage(totalPage)">{{ totalPage }}</button>
         <button @click="updateCPage(currentPage + 1)" :disabled="currentPage >= totalPage">下一页</button>
+        <span style="margin-left:16px">
+            前往
+            <el-input v-model="page" min="1" :max="totalPage" style="width: 50px;margin:0 6px;" size="mini"
+                @focus="foucus" @keyup.enter.native="blur" @blur="blur"></el-input>
+            页
+        </span>
     </div>
 </template>
 
@@ -43,6 +50,7 @@ export default {
         return {
             lxyms: 7,
             currentPage: this.indexFromWrap,
+            page: this.indexFromWrap,
             quickprevIconClass: "el-icon-more",
             quicknextIconClass: 'el-icon-more',
             options: [{
@@ -102,7 +110,19 @@ export default {
         }
     },
     methods: {
+        foucus() { },
+        blur() {
+            if (!this.page) {
+                this.page = 1
+            }
+            if (this.page > this.totalPage) {
+                this.page = this.totalPage
+            }
+            this.updateCPage(Number(this.page))
+        },
         changesize() {
+            this.currentPage = 1
+            this.page = 1
             this.$emit("updateCPage", this.currentPage, this.currentpageSize)
         },
         onMouseenter(direction) {
@@ -128,6 +148,13 @@ export default {
         }
     },
     watch: {
+        currentPage: {
+            handler(val) {
+                this.page = val
+            },
+            deep: true,
+            immediate: true
+        },
         //监听当前页下标
         indexFromWrap: {
             handler(val) {
@@ -148,14 +175,38 @@ export default {
     height: 40px;
     margin: 0 !important;
     padding: 0 !important;
+    display: flex;
+    align-items: center;
+
+    ::v-deep .el-input__inner {
+        padding: 0 !important;
+        font-size: 13px;
+        text-align: center;
+    }
+
+    ::v-deep .el-input--suffix {
+        .el-input__inner {
+            padding-right: 20px !important;
+        }
+    }
+
+    span {
+        display: inline-block;
+        font-size: 13px;
+        min-width: 35.5px;
+        height: 28px;
+        line-height: 28px;
+        vertical-align: top;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
 
     button {
         margin: 0 5px;
         background-color: #f4f4f5;
-        color: #606266;
+        color: black;
         outline: none;
         border-radius: 2px;
-        padding: 0 8px;
         vertical-align: top;
         display: inline-block;
         font-size: 13px;

src/main.js

@@ -26,6 +26,7 @@ import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/xinelu";
 // 分页组件
 import Pagination from "@/components/Pagination";
+import myPagination from "@/components/myPagination";
 // 自定义表格工具组件
 import RightToolbar from "@/components/RightToolbar"
 // 富文本组件
@@ -63,6 +64,7 @@ Vue.prototype.handleTree = handleTree
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)
+Vue.component('myPagination', myPagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)

src/views/monitor/logininfor/index.vue

@@ -68,8 +68,10 @@
         </el-table-column>
       </el-table>
     </div>
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
+    <myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
+      :indexFromWrap="queryParams.pageNum" @updateCPage="updateCPage"></myPagination>
+    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" /> -->
   </div>
 </template>
 
@@ -116,6 +118,11 @@ export default {
     this.screenChange()
   },
   methods: {
+    updateCPage(index, size) {
+      this.queryParams.pageNum = index
+      this.queryParams.pageSize = size
+      this.getList();
+    },
     /** 查询登录日志列表 */
     getList() {
       this.loading = true;

src/views/monitor/operlog/index.vue

@@ -84,8 +84,8 @@
         </el-table-column>
       </el-table>
     </div>
-    <Pagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize" :indexFromWrap="queryParams.pageNum"
-      @updateCPage="updateCPage"></Pagination>
+    <myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
+      :indexFromWrap="queryParams.pageNum" @updateCPage="updateCPage"></myPagination>
     <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" /> -->
     <!-- 操作日志详细 -->
@@ -132,11 +132,7 @@
 
 <script>
 import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
-import Pagination from '../../components/Pagination'
 export default {
-  components: {
-    Pagination,
-  },
   name: "Operlog",
   dicts: ['sys_oper_type', 'sys_common_status'],
   data() {