在你的代码中，使用了 Vue 的响应式特性来管理日期范围选择。根据你的描述，似乎你遇到了一个问题，即选择一个日期范围后另一个日期范围的状态会受到影响。
以下是一些建议和可能的修复：
避免直接赋值：在
v-model:value中使用formState[(date, dateEnd)]这种语法是不正确的，这样不会得到你想要的属性。你应该明确地指定属性名称。例如：v-model:value="[formState.date, formState.dateEnd]"修改
@change处理器：确保在日期改变时只更新相关字段。在@change的箭头函数中，你已经做得很好，但需要保证它们不会互相干扰。简化结构：考虑将这两个范围选择器分开，而不是共享同一个对象。这样可以避免不同范围选择器间的不必要交互。
以下是经过修改后的代码片段：
<template>
<div>
<a-row>
<a-col :span="8">
<a-form-item name="dateRange" label="日期" v-bind="dateRange">
<a-range-picker
v-model:value="[formState.date, formState.dateEnd]"
value-format="YYYY-MM-DD"
@change="(dates) => {
formState.date = dates[0];
formState.dateEnd = dates[1];
}"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item name="importDateRange" label="导入日期" v-bind="importDateRange">
<a-range-picker
v-model:value="[formState.importDate, formState.importDateEnd]"
value-format="YYYY-MM-DD"
@change="(importDates) => {
formState.importDate = importDates[0];
formState.importDateEnd = importDates[1];
}"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item style="margin-left: 40px">
<a-button class="margin-right-10" type="primary" @click="queryTable">查询</a-button>
<a-button @click="reset">重置</a-button>
</a-form-item>
</a-col>
</a-row>
</div>
</template>
<script>
import { ref, reactive } from 'vue';
const data = ref([]);
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: 25,
order: [],
search: { regex: false, value: '' },
params: {
customerId: 'A10101',
date: formState.date,
dateEnd: formState.dateEnd,
importDate: formState.importDate,
importDateEnd: formState.importDateEnd,
start: 0
}
};
CollectionRecord(params).then((response) => {
data.value = response.data;
}).catch((error) => {
console.error(`请求失败: ${error}`);
});
};
const reset = () => {
console.log(formState);
// Resetting all the dates to empty strings.
Object.assign(formState, {
date: '',
dateEnd: '',
importDate: '',
importDateEnd: ''
});
};
</script>
主要修改点：
- 将
v-model:value改成了明确指定属性。 - 保持每个范围选择器的状态完全独立，减少潜在干扰。
如果还有其他具体问题或错误，请告诉我！
内容由零声教学AI助手提供，问题来源于学员提问
![● VMS.service - VMS Service
Loaded: error (Reason: Invalid argument)
Active: inactive (dead)
Oct 14 10:10:19 localhost.localdomain systemd[1]: [/etc/systemd/system/VMS.service:7] Executable path is not absolute, ignoring: jav...ive=dev
Oct ...](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162237121215388.png)
![make[1]: *** [Makefile:219：redis-server] 错误 1
make[1]: 离开目录“/home/zct/share/tools/redis/redis-5.0.4/src”
make: *** [Makefile:6：all] 错误 2](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162230567920271.png)
