在你提供的代码中，确实存在一个小问题，导致一个日期框的选择会影响另一个日期框。具体来说，你在 v-model:value 中使用了不正确的语法。为了确保每个日期范围选择器独立管理自己的状态，可以做如下修改：
- 直接为
v-model:value分别绑定对应的值，而不是通过复杂的表达式。 - 确保在
@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" htmlType="submit">查询</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);
// 重置所有表单字段
for (let key in formState) {
if (formState.hasOwnProperty(key)) {
formState[key] = '';
}
}
};
</script>
修改说明：
- 在
v-model:value中，我使用了数组[formState.date, formState.dateEnd]和[formState.importDate, formState.importDateEnd]来确保每个<a-range-picker>控件都管理各自的状态。 - 在
reset()方法中，我用循环遍历了formState对象来简化重置操作。
这样，每个日期范围选择器将独立工作，不会互相影响。
内容由零声教学AI助手提供，问题来源于学员提问
