消息列表分页

src/features/SiteMessage/SiteMessageDetail.vue

@@ -11,10 +11,7 @@
     <div style="display: flex; flex-direction: row-reverse;">
       <div style=" margin-top: 20px; margin-right: 20px;">
         <i-button>
-          <div
-            class="back-block"
-            @click="() => this.$router.push('/site-message')"
-          >
+          <div class="back-block" @click="goBack">
             <img src="./svgs/back.svg" /> &nbsp;返回列表
           </div>
         </i-button>
@@ -79,6 +76,9 @@ export default {
         await this.getList();
       }
     },
+    goBack() {
+      this.$router.push("/site-message" + location.search);
+    },
   },
   computed: {
     ...mapState(["user", "siteMessages", "siteMessagesTimeStamp"]),

src/features/SiteMessage/SiteMessageHome.vue

@@ -23,8 +23,14 @@
         border
         ref="selection"
         :columns="columns"
-        :data="siteMessages"
+        :data="siteMessagesComputed"
       ></Table>
+      <Page
+        :total="siteMessages.length"
+        :page-size="pageSize"
+        :current.sync="page"
+        style="text-align: right; margin-top: 10px;"
+      />
     </div>
   </main-layout>
 </template>
@@ -49,7 +55,7 @@ export default {
           render: (h, params) => {
             return (
               <router-link
-                to={"/site-message/" + params.row.id}
+                to={"/site-message/" + params.row.id + "?fromPage=" + this.page}
                 style="display: flex"
               >
                 <img
@@ -70,11 +76,16 @@ export default {
           width: "150",
         },
       ],
+      page: 1,
+      pageSize: 10,
     };
   },
   async mounted() {
     window._hmt.push(["_trackEvent", "站内消息列表页面", "进入页面"]);
     await this.getList();
+    if (this.$route.query.fromPage) {
+      this.page = +this.$route.query.fromPage;
+    }
   },
   methods: {
     ...mapMutations(["updateSiteMessages", "updateSiteMessagesTimeStamp"]),
@@ -118,6 +129,12 @@ export default {
   },
   computed: {
     ...mapState(["user", "siteMessages", "siteMessagesTimeStamp"]),
+    siteMessagesComputed() {
+      return this.siteMessages.slice(
+        (this.page - 1) * this.pageSize,
+        this.page * this.pageSize
+      );
+    },
   },
 };
 </script>

src/plugins/iview.js

@@ -25,6 +25,7 @@ import {
   TabPane,
   Steps,
   Step,
+  Page,
 } from "iview";
 Vue.component("Button", Button);
 Vue.component("Form", Form);
@@ -49,6 +50,7 @@ Vue.component("Tabs", Tabs);
 Vue.component("TabPane", TabPane);
 Vue.component("Steps", Steps);
 Vue.component("Step", Step);
+Vue.component("Page", Page);
 
 Vue.prototype.$Message = Message;
 Vue.prototype.$Modal = Modal;