ZBLOG

...

要实现点击“查询”按钮重新调用接口并在点击“重置”按钮时清空查询条件,你需要在 queryTablereset 方法中分别处理这些逻辑。

以下是如何修改你的代码:

  1. 添加 queryTablereset 方法:这两个方法将在用户点击相应的按钮时被调用。
  2. queryTable 方法中重新请求数据
  3. reset 方法中清空表单数据和 data

更新后的代码如下:

  1. <template>
  2. <div class="HistoricalReminder">
  3. <div>
  4. <a-form
  5. :model="formState"
  6. name="time related controls"
  7. v-bind="formItemLayout"
  8. @finish="onFinish"
  9. @finishFailed="onFinishFailed"
  10. >
  11. <a-row>
  12. <a-col :span="8">
  13. <a-form-item label="日期" name="dateRange">
  14. <a-range-picker
  15. v-bind="rangeConfig"
  16. format="YYYY-MM-DD"
  17. value-format="YYYY-MM-DD"
  18. v-model:value="formState.dateRange" <!-- 使用v-model绑定 -->
  19. />
  20. </a-form-item>
  21. </a-col>
  22. <a-col :span="8">
  23. <a-form-item label="导入日期" name="importDateRange">
  24. <a-range-picker
  25. v-bind="rangeConfig"
  26. format="YYYY-MM-DD"
  27. value-format="YYYY-MM-DD"
  28. v-model:value="formState.importDateRange" <!-- 使用v-model绑定 -->
  29. />
  30. </a-form-item>
  31. </a-col>
  32. <a-col :span="8">
  33. <a-form-item style="margin-left: 40px;">
  34. <a-button
  35. class="margin-right-10"
  36. type="primary"
  37. @click.prevent="queryTable" <!-- 调用查询方法 -->
  38. >
  39. 查询
  40. </a-button>
  41. <a-button @click.prevent="reset()">重置</a-button> <!-- 调用重置方法 -->
  42. </a-form-item>
  43. </a-col>
  44. </a-row>
  45. </a-form>
  46. </div>
  47. <a-table
  48. :columns="columns"
  49. :data-source="data"
  50. :scroll="{ x: 'max-content' }"
  51. :pagination="{ ...paginationOptions }" <!-- 提取分页配置 -->
  52. :rowClassName= "(record, index) => (index % 2 === 0 ? 'red-row' : '') "
  53. ></a-table>
  54. </div>
  55. </template>
  56. <script setup>
  57. import { ref } from 'vue'
  58. import { CollectionRecord } from '../../utils' // 确保路径正确
  59. const formState = ref({
  60. dateRange: null,
  61. importDateRange: null,
  62. })
  63. const columns = [
  64. {
  65. title: '借据号',
  66. dataIndex: 'loanInfoCode',
  67. key: 'loanInfoCode',
  68. width: 100,
  69. },
  70. {
  71. title: '合同编号',
  72. dataIndex: 'contractCode',
  73. key: 'contractCode',
  74. width: 150,
  75. },
  76. {
  77. title: '客户姓名',
  78. dataIndex: 'customerName',
  79. key: 'customerName',
  80. width: 150,
  81. },
  82. ]
  83. const data = ref([])
  84. const pageSize = ref(5)
  85. const handlePageSizeChange = (current, size) => {
  86. console.log(`每页条数变化为: ${size}`)
  87. pageSize.value = size
  88. }
  89. const paginationOptions = {
  90. pageSize: pageSize.value,
  91. showSizeChanger: true,
  92. pageSizeOptions:['5','10','20'],
  93. onShowSizeChange(handlePageSizeChange),
  94. showQuickJumper:true,
  95. showTotal:(total, range) =>
  96. `显示 ${range[0]}~${range[1]}条记录,共 ${total} 条记录`,
  97. }
  98. // 查询方法
  99. const queryTable = () => {
  100. const params = {
  101. draw:1,
  102. length:size,
  103. order:[]
  104. search:{regex:false,value:''},
  105. searchParams:{
  106. custId:'A10101',
  107. dateStart:this.formState.dateRange[0], // 从表单获取值
  108. dateEnd:this.formState.dateRange[1],
  109. },
  110. }
  111. CollectionRecord(params)
  112. .then((response) => {
  113. data.value=response.data
  114. })
  115. .catch((error)=>console.error('请求失败:',error))
  116. }
  117. // 重置方法
  118. const reset=()=>{
  119. formState.value={
  120. dateRange:null, // 清空选择的日期范围
  121. importDateRange:null, // 清空导入日期范围
  122. }
  123. data.value=[]; // 清空数据表格内容
  124. }
  125. </script>

修改说明:

  1. 使用了Vue的双向绑定(v-model) 来管理表单中的日期选择器,确保当你点击重置时能够直接清空这些值。
  2. queryTable 函数 中通过访问 formState.value.dateRange 获取用户选择的日期范围并传递给接口。
  3. reset 函数 用于将所有状态重置,包括清空数据源和表单状态。

这样一来,用户点击“查询”会根据输入的新条件进行请求,而点击“重置”则会清空所有输入字段及表格数据。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?