ZBLOG

你可以在Vue 3中使用Ant Design Vue实现两个日期框以进行查询。以下是一个简单的示例,演示了如何添加开始和结束日期选择框,并在点击按钮时触发查询。

首先,确保已安装Ant Design Vue库,然后您可以将其应用于您的组件中:

  1. <template>
  2. <div class="HistoricalReminder">
  3. <a-row>
  4. <a-col :span="8">
  5. <a-date-picker v-model:value="startDate" placeholder="开始日期" />
  6. </a-col>
  7. <a-col :span="8">
  8. <a-date-picker v-model:value="endDate" placeholder="结束日期" />
  9. </a-col>
  10. <a-col :span="8">
  11. <a-button type="primary" @click="fetchData">查询</a-button>
  12. </a-col>
  13. </a-row>
  14. <a-table
  15. :columns="columns"
  16. :data-source="data"
  17. :scroll="{ x: 'max-content' }"
  18. :pagination="{
  19. pageSize: pageSize,
  20. showSizeChanger: true,
  21. pageSizeOptions: ['5', '10', '20'],
  22. onShowSizeChange: handlePageSizeChange,
  23. showQuickJumper: true,
  24. showTotal: (total, range) => `显示 ${range[0]}~${range[1]}条记录,共 ${total} 条记录`
  25. }"
  26. :rowClassName="(record, index) => (index % 2 === 0 ? 'red-row' : '')"
  27. ></a-table>
  28. </div>
  29. </template>
  30. <script setup>
  31. import { ref } from 'vue';
  32. import { CollectionRecord } from '../../utils'; // 确保路径正确
  33. const columns = [
  34. {
  35. title: '借据号',
  36. dataIndex: 'loanInfoCode',
  37. key: 'loanInfoCode',
  38. width: 100,
  39. },
  40. {
  41. title: '合同编号',
  42. dataIndex: 'contractCode',
  43. key: 'contractCode',
  44. width: 150,
  45. },
  46. {
  47. title: '客户姓名',
  48. dataIndex: 'customerName',
  49. key: 'customerName',
  50. width: 150,
  51. },
  52. ];
  53. const data = ref([]);
  54. const pageSize = ref(5);
  55. const startDate = ref(null);
  56. const endDate = ref(null);
  57. const handlePageSizeChange = (current, size) => {
  58. console.log(`每页条数变化为: ${size}`);
  59. pageSize.value = size;
  60. }
  61. const fetchData = () => {
  62. const params = {
  63. draw: 1,
  64. length: pageSize.value, // 使用当前页面大小
  65. order: [],
  66. searchParams: {
  67. custId: 'A10101', // 如果有其他的搜索条件,可以动态传递
  68. dateStart: startDate.value ? startDate.value.format('YYYY-MM-DD') : '',
  69. dateEnd: endDate.value ? endDate.value.format('YYYY-MM-DD') : ''
  70. },
  71. };
  72. CollectionRecord(params)
  73. .then((response) => {
  74. data.value = response.data;
  75. })
  76. .catch((error) => console.error('请求失败:', error));
  77. }
  78. </script>
  79. <style scoped>
  80. .red-row {
  81. background-color: #ffcccc; /* 自定义颜色 */
  82. }
  83. </style>

各部分说明:

  1. 日期选择:使用<a-date-picker>来选择开始和结束日期,并通过v-model:value绑定到对应的变量。
  2. 查询按钮:当用户点击“查询”按钮时,会调用fetchData方法。
  3. 数据获取:在fetchData中,构造请求参数,并调用API获取数据并更新表格。

请根据实际情况调整API路径及其他参数。如果需要进一步的自定义功能,如处理时间格式等,请根据需要进行适配。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19314

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?