-Go服务器开发

要在数据为空的情况下保持分页组件正常显示，你需要确保 a-table 组件的 pagination 属性有正确配置。即使数据为空，pagination 部分应该仍然被渲染并且可以进行操作。

以下是一些步骤和修改建议，以确保分页在数据为空时正常展示：

确保设置 total 属性：当你的 data 数组为空时，可以给分页传递一个 total 值。通常这个值应为请求到的数据总数。在空数据情况下，可以设定它为你希望的值，例如0。
修改 <a-table> 的属性：在模板中调整 :pagination 的实现方式，特别是加入一个条件判断以支持无数据状态下的分页。
处理查询函数：在获取数据之后，要更新总数，这样可以控制分页。

以下是调整后的代码示例：

<template>
  <div class="HistoricalReminder">
    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 'max-content' }"
      :pagination="{
        current: currentPage,
        pageSize: pageSize,
        total: totalRecords,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20'],
        onShowSizeChange: handlePageSizeChange,
        showQuickJumper: true,
        showTotal: (total, range) => `显示 ${range[0]}~${range[1]}条记录，共 ${total} 条记录`
      }"
      :rowClassName="(record, index) => (index % 2 === 0 ? 'red-row' : '')"
    ></a-table>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { CollectionRecord } from '../../utils'

const columns = []

const data = ref([])
const totalRecords = ref(0) // 用于保存总记录数
const currentPage = ref(1) // 当前页码
const pageSize = ref(5)
const formState = reactive({
  date: '',
  dateEnd: '',
  importDate: '',
  importDateEnd: ''
})

const handlePageSizeChange = (current, size) => {
  console.log(`每页条数变化为:${size}`)
  pageSize.value = size
}

const queryTable = () => {
  const params = {
    draw: 1,
    length: pageSize.value,
    order: [1],
    searchParams:{
      custId: 'A10101',
      date: formState.date,
      dateEnd: formState.dateEnd,
      importDate: formState.importDate,
      importDateEnd: formState.importDateEnd
    },
    start: (currentPage.value - 1) * pageSize.value // 根据当前页计算起始位置
  }

  CollectionRecord(params)
    .then((response) => {
      data.value = response.data || [] // 确保返回的是数组
      totalRecords.value = response.total || 0; // 更新总记录数，假设 API 返回了这个字段 
    })
    .catch((error) => {
      console.error('请求失败:', error)
    })
}

const reset = () => {
  console.log(formState)
  formState.date = ''
  formState.dateEnd = ''
  formState.importDate = ''
  formState.importDateEnd = ''
}
</script>

<style scoped>
.red-row {
   background-color: #ffcccc; /* 或其他样式 */
}
</style>