0 ? data :[{}]":scrol1l="{x:'max-content'} :pagination="{ pageSize: pageSize, showSizeChanger: true, onShowSiz...-Go服务器开发

下面是你提供的代码的补充和修正版本：

<template>
  <div class="HistoricalReminder">
    <div class="page-form-area"></div>
    <a-table
      :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' : '')"
    />
  </div>
</template>

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

const columns = []; // Define your columns here
const data = ref([]);
const totalRecords = ref(0);
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: [],
    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; // 注意这里可能需要根据实际 API 的返回值调整
    })
    .catch((error) => console.error('请求失败:', error));
};

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

// You may need to call queryTable() or other functions depending on your application logic.
</script>

<style scoped>
.red-row {
  background-color: #ffcccc; /* Change this color as per your design */
}
</style>