Browse Source

ErrorLogs组件添加分页功能,在记录数超过一页的情况下开启分页。调整展开内容样式,删除废字段

偶是小菜鸟 5 năm trước cách đây
mục cha
commit
5e44bbb167
2 tập tin đã thay đổi với 38 bổ sung7 xóa
  1. 0 1
      src/const/logs/index.js
  2. 38 6
      src/page/logs/index.vue

+ 0 - 1
src/const/logs/index.js

@@ -1,7 +1,6 @@
 export default {
   menu: false,
   addBtn: false,
-  page: false,
   border: true,
   expand: true,
   refreshBtn: false,

+ 38 - 6
src/page/logs/index.vue

@@ -1,7 +1,10 @@
 <template>
   <avue-crud
-    :data="logsList"
-    :option="option">
+    :data="list"
+    :option="option"
+    :page="page"
+    @current-change="currentChange"
+    @size-change="sizeChange">
     <template slot="menuLeft">
       <el-button
         type="primary"
@@ -38,17 +41,46 @@ export default {
   name: 'ErrLogs',
   data() {
     return {
-      option: option
+      page: {
+        currentPage: 1,
+        pageSize: 10,
+        // 默认不分页,若记录数超过pageSize条,则分页
+        total: 0
+      },
+      option: option,
+      list: []
     }
   },
   created() {
 
   },
-  mounted() { },
+  mounted() {
+    this.getList();
+  },
   computed: {
-    ...mapGetters(['logsList'])
+    ...mapGetters(['logsList', 'logsLen'])
   },
   methods: {
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+      this.getList();
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+      this.getList();
+    },
+    getList() {
+      const total = this.logsLen;
+      const pageSize = this.page.pageSize;
+      if (total <= pageSize) {
+        this.list = this.logsList;
+      } else {
+        // 超过一页记录,开启分页
+        const currentPage = this.page.currentPage;
+        this.list = this.logsList.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+        this.page.total = total;
+      }
+    },
     send() {
       this.$confirm('确定上传本地日志到服务器?', '提示', {
         confirmButtonText: '确定',
@@ -86,6 +118,6 @@ export default {
   display: block;
   font-family: monospace;
   white-space: pre;
-  margin: 1em 0px;
+  margin: 0 1em;
 }
 </style>