|
@@ -252,6 +252,17 @@
|
|
|
>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+
|
|
|
+ <div class="pagination-wrapper">
|
|
|
+ <el-pagination
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="allTableDataList.length"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -311,7 +322,11 @@ export default {
|
|
|
timevalue: [], // 绑定 el-date-picker 的值
|
|
|
startTime: "", // 开始时间
|
|
|
endTime: "", // 结束时间
|
|
|
- tableDataList: [],
|
|
|
+
|
|
|
+ allTableDataList: [], // 保存全部数据
|
|
|
+ tableDataList: [], // 当前分页显示的数据
|
|
|
+ currentPage: 1, // 当前页
|
|
|
+ pageSize: 50,
|
|
|
|
|
|
samplingTime: "", // 采样时间
|
|
|
|
|
@@ -807,7 +822,8 @@ export default {
|
|
|
axios
|
|
|
.post("/ETLapi/waveData/getMesureData", params)
|
|
|
.then((res) => {
|
|
|
- this.tableDataList = res.data.datas;
|
|
|
+ this.allTableDataList = res.data.datas || [];
|
|
|
+ this.handleFakePagination();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.error("Error:", error);
|
|
@@ -868,6 +884,17 @@ export default {
|
|
|
}
|
|
|
return wbOut;
|
|
|
},
|
|
|
+
|
|
|
+ handleFakePagination() {
|
|
|
+ const start = (this.currentPage - 1) * this.pageSize;
|
|
|
+ const end = start + this.pageSize;
|
|
|
+ this.tableDataList = this.allTableDataList.slice(start, end);
|
|
|
+ },
|
|
|
+
|
|
|
+ handlePageChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.handleFakePagination();
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -957,6 +984,11 @@ export default {
|
|
|
width: 39%;
|
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
|
+ .pagination-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 10px 0; /* 可选:分页组件与上方表格的间距 */
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|