fen页

src/views/message/messageList.vue

@@ -28,7 +28,8 @@
         </el-row>
       </div>
       <div class="down-table">
-        <el-table :data="tableData" border style="width: 100%" class="messagetable">
+        <el-table :data="tableData" 
+        order style="width: 100%" class="messagetable">
           <el-table-column prop="id" label="ID">
           </el-table-column>
           <el-table-column :formatter="stateFormat" prop="messageTitle" label="消息标题">
@@ -50,14 +51,18 @@
       </div>
     </div>
     <div class="bottom">
-      <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></div>
-      <span class="bottom-number">共{{ 0 }}条 </span>
+      <div class="bottom-page">
+        <el-pagination  layout="prev, pager, next" :total="mockMessageList.length"  @size-change="handleSizeChange"
+      @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+      <span class="bottom-number">共{{ mockMessageList.length }}条 </span>
     </div>
   </div>
 </template>
 <script>
 // mock 版本
-import {getMessage} from '../../api/message/mock/message.js' 
+import { getMessage } from '../../api/message/mock/message.js'
 
 
 
@@ -75,6 +80,8 @@ export default {
       value2: "",
       mock: "",
       mockMessageList: [],
+      currentPage : 1,
+      pagesize : 10 
     }
   },
   mounted() {
@@ -85,10 +92,26 @@ export default {
   },
   methods: {
     getMockMessageList() {
-      getMessage().then((res)=>{
-        this.tableData = res.data.list
+      getMessage().then((res) => {
+        this.mockMessageList = res.data.list
+        this.getPageData()
       })
     },
+    //分页功能
+    getPageData(){
+      console.log(this.mockMessageList);
+      let start = (this.currentPage - 1) * this.pagesize;
+      let end = start + this.pagesize;
+      this.tableData = this.mockMessageList.slice(start, end);
+    },
+    handleSizeChange(val) {
+      this.pagesize = val;
+      this.getPageData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getPageData();
+    },
     stateFormat(row, column, cellValue) {
       if (!cellValue) return ''
       if (cellValue.length > 15) {       //最长固定显示10个字符
@@ -109,9 +132,9 @@ export default {
           title: '标题'
         }
       });
-    }, 
+    },
     //添加跳转
-    addNoticce() { 
+    addNoticce() {
       this.$router.push("/messageList/addMessage");
     }
   }