-Go服务器开发

在你的代码中，分页和数据显示逻辑看起来是基于 totalRecords 的值。要确保在没有数据的情况下不显示分页组件，可以对 data 和 totalRecords 的值进行一些检查。以下是修改建议：

条件渲染：通过计算属性或直接在模板中添加条件，判断当没有数据时是否应该渲染分页组件。
调整数据源：确保 data 有效时才显示数据表格，并且当没有数据时清空 pagination。

以下是可能的实现方法：

修改模板部分

<template>
  <div class="HistoricalReminder">
    <div class="page-form-area"></div>
    <a-table
      v-if="totalRecords > 0" <!-- 确保有记录时才显示表格 -->
      :columns="columns"
      :data-source="data.length > 0 ? data : [{}]"
      :scroll="{ x: 'max-content' }"
      :pagination="{
        pageSize: pageSize,
        showSizeChanger: true,
        onShowSizeChange: handlePageSizeChange,
        showQuickJumper: true,
        showTotal: (total, range) => `显示 ${range[0]}~${range[1]}条记录，共 ${total} 条记录`,
        total: totalRecords
      }"
      :rowClassName="(record, index) => (index % 2 === 0 ? 'red-row' : '')"
    />
    
    <p v-else>暂无数据</p> <!-- 当没有数据时显示提示 -->
  </div>
</template>

修改 JavaScript 部分

你已经将 API 响应存储到 data 中，并设置了总记录数到 totalRecords，这是好的做法。确保后端返回的数据格式正确。

确保在每次查询之前重置相应状态，这样用户能看到最新的结果：

const queryTable = () => {
  // 在请求前重置状态（可选）
  data.value = [];
  
  const params = {
    draw: 1,
    length: pageSize.value,
    order: [],
    search: { regex: false, value: '' },
    searchParams: {
      custId: 'A10101',
      date: formState.date,
      dateEnd: formState.dateEnd,
      importDate: formState.importDate,
      importDateEnd: formState.importDateEnd
    },
    start: 0
  };
  CollectionRecord(params)
    .then((response) => {
      data.value = response.data || []; // 保证即使没有数据也为数组类型
      totalRecords.value = response.recordsFiltered || 0; // 设置总记录数
    })
    .catch((error) => console.error('请求失败:', error));
};