-Go服务器开发

在您提供的 Vue 组件代码中，两个日期范围选择器（“日期”和“导入日期”）之间的影响主要源于它们都使用了相同的 v-model:value 属性和处理逻辑。具体来说，当您更改一个日期范围选择器时，可能是由于某些原因导致数据反向绑定到另一个输入框。

问题分析

相同的数据结构：您使用的是相同的 formState 对象来管理所有的日期状态。如果不小心在处理事件时修改了 formState 的其他部分，会导致意外的数据更改。
对 @change 事件处理的不当引用：如果没有正确地引用各自独立的值，更改一个范围选择器可能会触发对另一个选择器的更新，这取决于您的具体实现。

建议解决方案

为了确保每个范围选择器互不影响，可以进行以下调整：

确保在每个 <a-range-picker> 中使用独立的方法处理其变化。
明确分开这两个范围选择器的状态，以避免互相影响。

改进后的代码示例：

<template>
    <div>
        <a-row>
            <a-col :span="8">
                <a-form-item name="dateRange" label="日期">
                    <a-range-picker
                        v-model:value="[formState.date, formState.dateEnd]"
                        value-format="YYYY-MM-DD"
                        @change="onDateRangeChange"
                    />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item name="importDateRange" label="导入日期">
                    <a-range-picker
                        v-model:value="[formState.importDate, formState.importDateEnd]"
                        value-format="YYYY-MM-DD"
                        @change="onImportDateRangeChange"
                    />
                </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 onDateRangeChange = (dates) => {
    if (dates && dates.length) {
        formState.date = dates[0];
        formState.dateEnd = dates[1];
    } else {
        formState.date = '';
        formState.dateEnd = '';
    }
};
const onImportDateRangeChange = (dates) => {
    if (dates && dates.length) {
        formState.importDate = dates[0];
        formState.importDateEnd = dates[1];
    } else {
        formState.importDate = '';
        formState.importDateEnd = '';
    }
};
const queryTable = () => {
   // Your existing query logic...
};
const reset = () => {
   // Reset all fields in the reactive state
   Object.assign(formState, { date: '', dateEnd: '', importDate: '', importDateEnd: '' });
};
</script>