page

src/views/message/messageList.vue

@@ -28,7 +28,7 @@
         </el-row>
       </div>
       <div class="down-table">
-        <el-table :data="tableData" order style="width: 100%" class="messagetable">
+        <el-table height="300" :data="tableData" order style="width: 100%" class="messagetable">
           <el-table-column prop="newsId" label="ID" align="center">
           </el-table-column>
           <el-table-column :formatter="stateFormat" prop="newsTitle" label="消息标题" align="center">
@@ -47,6 +47,9 @@
         </el-table>
       </div>
     </div>
+    <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
+      id="page">
+    </el-pagination>
   </div>
 </template>
 <script>
@@ -59,6 +62,10 @@ export default {
       input: {
         value1: '', // 搜索姓名
         value2: ''  // 搜索时间
+      },
+      pageInfo: { // 分页信息
+        pageNum: 1,
+        pageSize: 10
       }
     }
   },
@@ -68,11 +75,16 @@ export default {
   methods: {
     // 获取消息列表
     getMessageList() {
-      getMessage().then((res) => {
+      getMessage(this.pageInfo).then((res) => {
         this.tableData = res.rows;
         this.total = res.total;
       })
     },
+    // 分页跳转
+    handleCurrentChange(newPage) {
+      this.pageInfo.pageNum = newPage;
+      this.getMessageList();
+    },
     // 搜索消息
     check() {
       if (this.input.value1 || this.input.value2) {
@@ -99,13 +111,27 @@ export default {
     },
     //  删除列表
     deleteM(row) {
-      deleteMessage(row.newsId).then(() => {
-        this.getMessageList();
-      })
+      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteMessage(row.newsId).then(() => {
+          this.getMessageList();
+        })
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
     },
     // 查看详情
     viewDetails(row) {
-      console.log(row);
       this.$router.push({
         name: "messageDetails",
         query: {
@@ -115,7 +141,7 @@ export default {
         }
       });
     },
-    //添加跳转
+    // 添加跳转
     addNoticce() {
       this.$router.push("/messageList/addMessage");
     },
@@ -264,4 +290,9 @@ export default {
 .bottom {
   float: right;
 }
+
+#page {
+  float: right;
+  margin-right: 20px;
+}
 </style>