优化表格触底加载js交互功能逻辑

CD配唱片

2025-04-24 e72d24db3a5b774768c86e8dde4283c7359e8420

优化表格触底加载js交互功能逻辑

 src/components/HxlhTable/index.vue

@@ -39,6 +39,9 @@
      @checkbox-all="checkChangeall"
      @scroll-boundary="scrollBoundaryEvent"
    >
      <template v-slot:rowIndex="row">
        <slot name="rowIndex" v-bind="row" />
      </template>
      <template v-slot:buttons="row">
        <slot name="buttons" v-bind="row" />
      </template>

 src/utils/request.js

@@ -17,7 +17,7 @@
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 1000000
  timeout: 300000
})



 src/views/basicData/processRoute/index.vue

@@ -77,6 +77,9 @@
      @bottomAutoLoadMore="handleAutoLoadMore"
      @on-checkbox="handleCheckboxChange"
    >
      <template #rowIndex="{ rowIndex }">
        {{ rowIndex }}
      </template>
    </HxlhTable>
    <!-- 用户导入对话框 -->
    <el-dialog
@@ -325,7 +328,7 @@

// 表格配置-弹窗
const exampleColumns = ref([
  { type: "seq", title: "序号", width: 60 },
  { type: "seq", title: "序号", width: 60, slots: { default: "rowIndex" } },
  {
    title: "料号",
    field: "itemNo",
@@ -399,11 +402,12 @@
  //   align:"center",
  // }
]);
const hasMore = ref(true);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10000,
    pageNum: 0,
    pageSize: 10,
    itemNo: null,
    integrationDay: null,
  },
@@ -413,7 +417,7 @@
const { queryParams, form, rules } = toRefs(data);

/** 查询工艺路线列表 */
function getList() {
async function getList() {
  loading.value = true;
  queryParams.value.params = {};
  if (null != daterangeIntegrationDay && "" != daterangeIntegrationDay) {
@@ -422,16 +426,36 @@
    queryParams.value.params["endIntegrationDay"] =
      daterangeIntegrationDay.value[1];
  }
  listProcessRoute(queryParams.value).then((response) => {
    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 {
//     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);
//   }
// }
function handleAutoLoadMore(){
  queryParams.value.pageNum++;
  getList();
  queryParams.value.pageNum++;
}
// 取消按钮
function cancel() {

 vite.config.js

@@ -11,8 +11,8 @@
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  const { VITE_APP_ENV, VITE_APP_BASE_API, VITE_API_URL } = env;
  console.log(VITE_APP_BASE_API, VITE_API_URL);
  const { VITE_APP_ENV, VITE_APP_BASE_API } = env;
  console.log(VITE_APP_BASE_API, VITE_APP_ENV);
  // 根据环境变量动态设置代理
  const proxyConfig = () => {
    const personProxy = {
@@ -48,7 +48,7 @@

    switch (VITE_APP_ENV) {
      case "development":
        return personProxy;
        return devProxy;
      case "int":
        return devProxy;
      case "uat":