为了避免在选中一个日期范围后另一个日期范围也被赋值,我们需要调整 v-model
的绑定逻辑。在你的代码中,你使用了 v-model:value="formState[(date, dateEnd)]"
,这会导致 Vue 认为这是一个数组并在相互之间赋值。我们可以将 v-model
修改为具体的状态属性,并确保只在日期选择器变化时更新对应的状态。
以下是修改后的代码:
<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) => {
if (dates && dates.length > 0) {
formState.date = dates[0];
formState.dateEnd = dates[1];
} else {
formState.date = '';
formState.dateEnd = '';
}
}"
/>
</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) => {
if (importDates && importDates.length > 0) {
formState.importDate = importDates[0];
formState.importDateEnd = importDates[1];
} else {
formState.importDate = '';
formState.importDateEnd = '';
}
}"
/>
</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);
Object.assign(formState, { date: '', dateEnd: '', importDate: '', importDateEnd: '' });
};
</script>
修改点:
v-model:value
使用的是[formState.date, formState.dateEnd]
和[formState.importDate, formState.importDateEnd]
数组,以正确映射到两个输入框。- 在
@change
方法中增加了检查,确保只有在有有效日期时才进行赋值;如果没有选定日期,则重置相应字段为空。 - 在
reset()
函数中,使用Object.assign()
来重置所有表单状态。
通过这些修改,选中一个日期范围不会影响到另一个范围的选择。
内容由零声教学AI助手提供,问题来源于学员提问