From ebc5ce2b6e4cba0708d4f5efd20fd049fcd774e6 Mon Sep 17 00:00:00 2001
From: CD配唱片 <CD配唱片>
Date: 星期四, 08 五月 2025 13:22:25 +0800
Subject: [PATCH] 优化,用节流控制表格下拉加载更多分页数据避免请求过多数据

---
 src/views/basicData/processRoute/index.vue |   54 +++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/views/basicData/processRoute/index.vue b/src/views/basicData/processRoute/index.vue
index cdad7f9..ecc1327 100644
--- a/src/views/basicData/processRoute/index.vue
+++ b/src/views/basicData/processRoute/index.vue
@@ -77,6 +77,9 @@
       @bottomAutoLoadMore="handleAutoLoadMore"
       @on-checkbox="handleCheckboxChange"
     >
+      <template #rowIndex="{ rowIndex }">
+        {{ rowIndex }}
+      </template>
     </HxlhTable>
     <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� -->
     <el-dialog
@@ -200,10 +203,11 @@
   processRouteTempList,
   confirmProcessRoute,
 } from "@/api/basicData/processRoute";
+import { throttle } from "@/utils/throttle";
 import HxlhTable from "@/components/HxlhTable";
 import { getToken } from "@/utils/auth";
 import { ref } from "vue";
-import { ElMessage } from "element-plus";
+// import { ElMessage } from "element-plus";
 const { proxy } = getCurrentInstance();
 
 const processRouteList = ref([]);
@@ -217,7 +221,7 @@
 const title = ref("");
 const daterangeIntegrationDay = ref([]);
 //寮圭獥鐩稿叧
-const height = ref(document.documentElement.clientHeight - 260 + "px;");
+const height = ref(document.documentElement.clientHeight - 230 + "px;");
 const isVisible = ref(false);
 const isError = ref(false);
 const planned = ref(true);
@@ -325,7 +329,7 @@
 
 // 琛ㄦ牸閰嶇疆-寮圭獥
 const exampleColumns = ref([
-  { type: "seq", title: "搴忓彿", width: 60 },
+  { type: "seq", title: "搴忓彿", width: 60, slots: { default: "rowIndex" } },
   {
     title: "鏂欏彿",
     field: "itemNo",
@@ -399,11 +403,12 @@
   //   align:"center",
   // }
 ]);
+const hasMore = ref(true);
 const data = reactive({
   form: {},
   queryParams: {
-    pageNum: 1,
-    pageSize: 10000,
+    pageNum: 0,
+    pageSize: 100,
     itemNo: null,
     integrationDay: null,
   },
@@ -413,7 +418,7 @@
 const { queryParams, form, rules } = toRefs(data);
 
 /** 鏌ヨ宸ヨ壓璺嚎鍒楄〃 */
-function getList() {
+async function getList() {
   loading.value = true;
   queryParams.value.params = {};
   if (null != daterangeIntegrationDay && "" != daterangeIntegrationDay) {
@@ -422,16 +427,39 @@
     queryParams.value.params["endIntegrationDay"] =
       daterangeIntegrationDay.value[1];
   }
-  listProcessRoute(queryParams.value).then((response) => {
-    processRouteList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
 
-function handleAutoLoadMore(){
+  const response = await listProcessRoute(queryParams.value);
+  // processRouteList.value = response.rows;
+  if (processRouteList.value.length < queryParams.value.pageSize) {
+    hasMore.value = false;
+    processRouteList.value = response.rows;
+  } else {
+    processRouteList.value = [...processRouteList.value, ...response.rows];
+  }
+
+  // total.value = response.total;
+  loading.value = false;
+}
+// async function loadData() {
+//   try {
+//     const response = await fetch(`https://api.example.com/products?page=${this.page}&limit=${this.pageSize}`);
+//     const data = await response.json();
+//     if (data.length < this.pageSize) {
+//       this.hasMore = false;
+//     }
+//     this.products.push(...data);
+//     this.page++;
+//   } catch (error) {
+//     console.error('Error fetching data:', error);
+//   }
+// }
+const throttledScroll = throttle(() => {
   queryParams.value.pageNum++;
   getList();
+  console.log("1111")
+}, 200);
+function handleAutoLoadMore() {
+  throttledScroll()
 }
 // 鍙栨秷鎸夐挳
 function cancel() {

--
Gitblit v1.9.3