vue3-table-lite分页最后一页id未定义报错及自定义数据限制咨询

错误原因 #

当分页到最后一页时，传入的limit计算出的索引超出了接口返回的实际数据长度，循环中访问response.data[i]会取到undefined，进而读取id属性时触发报错。

解决方案 #

通过自定义代码限制数据读取的边界，确保循环不会超出数组长度，具体修改如下：

1. 修正排序数据处理函数 #

修改dataAsc和dataDesc函数，添加边界判断，确保循环索引始终在数据数组的有效范围内：

const dataAsc = (offset: number, end: number, response: any) => {
  const data = [];
  // 计算实际结束索引，不超过数据总长度
  const realEnd = Math.min(end, response.data.length);
  for (let i = offset; i < realEnd; i++) {
    const item = response.data[i];
    data.push({
      id: item.id,
      name: item.name,
      username: item.username,
      address: item.address,
      phone: item.phone,
      website: item.website,
      email: item.email,
      company: item.company,
    });
  }
  return data;
};

const dataDesc = (offset: number, end: number, response: any) => {
  const data = [];
  // 计算实际起始索引，不超过数据总长度-1，同时不小于offset
  const realStart = Math.min(end - 1, response.data.length - 1);
  for (let i = realStart; i >= offset; i--) {
    const item = response.data[i];
    data.push({
      id: item.id,
      name: item.name,
      username: item.username,
      address: item.address,
      phone: item.phone,
      website: item.website,
      email: item.email,
      company: item.company,
    });
  }
  return data;
};

2. 修正doSearch中的分页逻辑 #

原代码中对limit的调整逻辑有误，移除错误判断，同时明确vue3-table-lite的limit是每页条数，所以实际结束索引应为offset + limit：

const doSearch = (
  offset: number,
  limit: number,
  order: string,
  sort: string
) => {
  table.isLoading = true;
  table.isReSearch = offset == undefined ? true : false;

  const url = "https://jsonplaceholder.typicode.com/posts";
  axios.get(url).then((response: any) => {
    const endIndex = offset + limit;
    table.rows = sort === "asc" 
      ? dataAsc(offset, endIndex, response) 
      : dataDesc(offset, endIndex, response);

    table.totalRecordCount = response.data.length;
    table.sortable.order = order;
    table.sortable.sort = sort;
  });
};

3. 可选：添加健壮性判断 #

为避免意外情况，可在循环中添加空值判断，跳过无效数据：

// 在dataAsc循环内添加
const item = response.data[i];
if (!item) continue;

效果说明 #

修改后，当最后一页数据不足时，循环会自动截止到数据的最后一条，不会再访问不存在的数组索引，彻底解决"id is undefined"的错误，表格会正常展示剩余的所有数据。

内容的提问来源于stack exchange，提问作者Miangel