公告管理更新

src/views/notice/noticeList.vue

@@ -47,19 +47,31 @@
         <el-table-column prop="title" label="公告标题"> </el-table-column>
         <el-table-column prop="publishTime" label="发布时间"> </el-table-column>
         <el-table-column prop="operation" label="操作">
-          <el-button size="mini" type="text" icon="el-icon-edit"
-            >修改</el-button
-          >
-          <el-button size="mini" type="text" icon="el-icon-delete"
+          <template slot-scope="scope">
+            <el-button size="mini" type="text">查看详情</el-button>
+            <el-button
+              id="deleteBtn"
+              size="mini"
+              type="text"
+              @click="deleteBtn(scope.$index)"
+              >删除</el-button
+            >
+          </template>
+          <!-- <el-button size="mini" type="text" icon="el-icon-delete"
             >删除</el-button
-          >
+          > -->
         </el-table-column>
       </el-table>
     </div>
     <!-- 分页 -->
     <div class="pageMenu">
       <div id="dataNum">共0条</div>
-      <el-pagination background layout="prev, pager, next" :total="1" >
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+      >
       </el-pagination>
     </div>
   </div>
@@ -153,6 +165,9 @@
   margin-top: 7px;
   margin-right: 5px;
 }
+#deleteBtn {
+  margin-left: 10px;
+}
 </style>
   
 
@@ -164,30 +179,49 @@ export default {
       value1: "",
       tableData: [],
       mockNoticeList: [],
+      total: 0,
+      pageSize: 5,
+      totalNum:"",
     };
   },
   mounted() {
+    //获取总条目的id
+    this.totalNum = document.querySelector('#dataNum');
     this.getMockNoticeList();
     this.getTableList();
+    
+    
   },
 
   methods: {
     getMockNoticeList() {
       var Mock = require("mockjs");
       var data = Mock.mock({
-        "list|1-10": [
+        "list|1-20": [
           {
             "id|+1": 1,
             title: "@cword(3, 5)",
-            publishTime: "@date()",
+            publishTime: "@datetime()",
             // 'operation|1-10': "★",
           },
         ],
       });
       this.mockNoticeList = data;
     },
+    //获取数据按钮
     getTableList() {
       this.tableData = this.mockNoticeList.list;
+      // console.log(this.tableData)
+
+      //获取数据总数
+      this.totalNum.innerHTML = `共：${this.tableData.length}条`;
+      this.total = this.tableData.length;
+      // console.log(this.total)
+    },
+    // 删除按钮
+    deleteBtn(row) {
+      this.tableData.splice(this.tableData[row],1)
+      // console.log(this.tableData[row].id)
     },
   },
 };