优化,用节流控制表格下拉加载更多分页数据避免请求过多数据

CD配唱片

2025-05-08 ebc5ce2b6e4cba0708d4f5efd20fd049fcd774e6

优化,用节流控制表格下拉加载更多分页数据避免请求过多数据

 src/main.js

@@ -2,10 +2,10 @@

import Cookies from 'js-cookie'

import ElementPlus from 'element-plus'
// import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import locale from 'element-plus/es/locale/lang/zh-cn'
// import locale from 'element-plus/es/locale/lang/zh-cn'

import '@/assets/styles/index.scss' // global css

@@ -82,10 +82,10 @@
directive(app)

// ä½¿ç”¨element-plus å¹¶ä¸”设置全局的大小
app.use(ElementPlus, {
  // æ”¯æŒ large、default、small
  size: Cookies.get('size') || 'default'
})
// app.use(ElementPlus, {
//   // æ”¯æŒ large、default、small
//   size: Cookies.get('size') || 'default'
// })
app.use(VxeUIAll)
app.use(VxeUITable)
app.use(i18n)

 src/utils/throttle.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,31 @@
export function throttle(func, delay) {
    let lastTime = 0;
    
    return function(...args) {
      const now = Date.now();
      
      if (now - lastTime >= delay) {
        func.apply(this, args);
        lastTime = now;
      }
    }
  }
  
export function debounceThrottle(func, wait, immediate) {
  let timeout,
    previous = 0;
  return function (...args) {
    const now = Date.now();
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(this, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    if (now - previous > wait) {
      previous = now;
      if (callNow) func.apply(this, args);
    }
    timeout = setTimeout(later, wait);
  };
}

 src/views/basicData/processRoute/index.vue

@@ -203,6 +203,7 @@
  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";
@@ -427,18 +428,17 @@
      daterangeIntegrationDay.value[1];
  }

   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;
  
  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 {
@@ -453,9 +453,13 @@
//     console.error('Error fetching data:', error);
//   }
// }
function handleAutoLoadMore(){
  getList();
const throttledScroll = throttle(() => {
  queryParams.value.pageNum++;
  getList();
  console.log("1111")
}, 200);
function handleAutoLoadMore() {
  throttledScroll()
}
// å–消按钮
function cancel() {

 src/views/mainPlan/sheetMetalOrderManage/index.vue

@@ -224,7 +224,7 @@
const shopList = ref([]);
const allShopList = ref([]);
const processList = ref([]);
const height = ref(document.documentElement.clientHeight - 220 + "px;");
const height = ref(document.documentElement.clientHeight - 270 + "px;");
// è¡¨æ ¼é…ç½®-列表
const columns = ref([]);
// åˆ†é¡µå±žæ€§