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

CD配唱片

2025-04-24 e72d24db3a5b774768c86e8dde4283c7359e8420

 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() {