cid日志添加分页

src/views/CIDLog.vue

@@ -14,7 +14,10 @@ export default {
     return {
       ip: "",
       tableData: [],
+      ConfigFileCurrentPageData: [],
       loading: false,
+      pageSize: 10,
+      currentPage: 1,
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
@@ -36,6 +39,13 @@ export default {
   // methods 是一些用来更改状态与触发更新的函数
   // 它们可以在模板中作为事件处理器绑定
   methods: {
+    currentPageData() {
+      const { tableData, currentPage, pageSize } = this;
+      this.ConfigFileCurrentPageData = tableData.slice(
+        (currentPage - 1) * pageSize,
+        currentPage * pageSize
+      );
+    },
     roundNumber(number, decimals) {
       let num = 3.14159;
       let result = Math.round(number * 100) / 100;
@@ -56,19 +66,19 @@ export default {
       for(var i=0;i<data.length;i++){
         data[i].RunTime =  Math.round(data[i].RunTime * 100) / 100;
       }
-      // console.log(data[i]);
-
-
       this.tableData = data;
+      this.currentPageData();
     },
     onSubmit() {
       getDeviceList({ token: token });
     },
-    handleSizeChange() {
-      alert("每页记录数变化" + val);
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPageData();
     },
-    handleCurrentChange() {
-      alert("页码发生变化" + val);
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.currentPageData();
     },
 
     //设置项目执行构建部署
@@ -240,10 +250,9 @@ export default {
           </el-form>
 
           <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table 
-            :data="tableData" 
+          <el-table
+            :data="ConfigFileCurrentPageData"
             width="100%" 
-            border
             v-loading="loading"
             element-loading-text="数据加载中..."
           >
@@ -252,7 +261,8 @@ export default {
             <el-table-column
               prop="CreatedAt"
               label="创建时间"
-              width="100"
+              show-overflow-tooltip
+              width="200"
             ></el-table-column>
             <el-table-column
               prop="Script"
@@ -291,14 +301,15 @@ export default {
           <br />
 
           <!-- 分页条 -->
-          <!-- Pagination 分页 -->
-          <!-- <el-pagination
-            background
-            layout="total,sizes, prev, pager, next, jumper"
+          <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
-            :total="1000"
-          ></el-pagination> -->
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="tableData.length">
+          </el-pagination>
         </el-main>
       </el-container>
     </el-container>

src/views/ShellList.vue

@@ -401,6 +401,7 @@ export default {
                 <el-button
                   class="el-button--danger"
                   type="primary"
+                  :disabled="loading"
                   @click="getConfigFileList()"
                   >查询</el-button
                 >