ZBLOG

为了避免在选中一个日期范围后另一个日期范围也被赋值,我们需要调整 v-model 的绑定逻辑。在你的代码中,你使用了 v-model:value="formState[(date, dateEnd)]",这会导致 Vue 认为这是一个数组并在相互之间赋值。我们可以将 v-model 修改为具体的状态属性,并确保只在日期选择器变化时更新对应的状态。

以下是修改后的代码:

  1. <template>
  2. <div>
  3. <a-row>
  4. <a-col :span="8">
  5. <a-form-item name="dateRange" label="日期" v-bind="dateRange">
  6. <a-range-picker
  7. v-model:value="[formState.date, formState.dateEnd]"
  8. value-format="YYYY-MM-DD"
  9. @change="(dates) => {
  10. if (dates && dates.length > 0) {
  11. formState.date = dates[0];
  12. formState.dateEnd = dates[1];
  13. } else {
  14. formState.date = '';
  15. formState.dateEnd = '';
  16. }
  17. }"
  18. />
  19. </a-form-item>
  20. </a-col>
  21. <a-col :span="8">
  22. <a-form-item name="importDateRange" label="导入日期" v-bind="importDateRange">
  23. <a-range-picker
  24. v-model:value="[formState.importDate, formState.importDateEnd]"
  25. value-format="YYYY-MM-DD"
  26. @change="(importDates) => {
  27. if (importDates && importDates.length > 0) {
  28. formState.importDate = importDates[0];
  29. formState.importDateEnd = importDates[1];
  30. } else {
  31. formState.importDate = '';
  32. formState.importDateEnd = '';
  33. }
  34. }"
  35. />
  36. </a-form-item>
  37. </a-col>
  38. <a-col :span="8">
  39. <a-form-item style="margin-left: 40px">
  40. <a-button class="margin-right-10" type="primary" @click="queryTable" htmlType="submit">查询</a-button>
  41. <a-button @click="reset">重置</a-button>
  42. </a-form-item>
  43. </a-col>
  44. </a-row>
  45. </div>
  46. </template>
  47. <script>
  48. import { ref, reactive } from 'vue';
  49. const data = ref([]);
  50. const pageSize = ref(5);
  51. const formState = reactive({
  52. date: '',
  53. dateEnd: '',
  54. importDate: '',
  55. importDateEnd: ''
  56. });
  57. const handlePageSizeChange = (current, size) => {
  58. console.log(`每页条数变化为: ${size}`);
  59. pageSize.value = size;
  60. };
  61. const queryTable = () => {
  62. const params = {
  63. draw: 1,
  64. length: 25,
  65. order: [],
  66. search: { regex: false, value: '' },
  67. params: {
  68. customerId: 'A10101',
  69. date: formState.date,
  70. dateEnd: formState.dateEnd,
  71. importDate: formState.importDate,
  72. importDateEnd: formState.importDateEnd,
  73. start: 0
  74. }
  75. };
  76. CollectionRecord(params).then((response) => {
  77. data.value = response.data;
  78. }).catch((error) => {
  79. console.error(`请求失败: ${error}`);
  80. });
  81. };
  82. const reset = () => {
  83. console.log(formState);
  84. Object.assign(formState, { date: '', dateEnd: '', importDate: '', importDateEnd: '' });
  85. };
  86. </script>

修改点:

  1. v-model:value 使用的是 [formState.date, formState.dateEnd][formState.importDate, formState.importDateEnd] 数组,以正确映射到两个输入框。
  2. @change 方法中增加了检查,确保只有在有有效日期时才进行赋值;如果没有选定日期,则重置相应字段为空。
  3. reset() 函数中,使用 Object.assign() 来重置所有表单状态。

通过这些修改,选中一个日期范围不会影响到另一个范围的选择。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?