Vue3+PrimeVue同一字段双输入框传值及日期范围过滤问题

完全可以实现同一字段的日期范围过滤，问题出在过滤器的结构配置上，PrimeVue 的 DataTable 过滤器不识别你嵌套的 from/to 结构，需要调整为数组形式的多条件配置：

1. 正确的过滤器配置 #

将目标字段的过滤器设置为包含两个条件的数组，分别对应「大于等于起始日期」和「小于等于结束日期」：

import { ref } from 'vue';
import { FilterMatchMode } from 'primevue/api';

const filters = ref({
  InputDate: [
    { value: '', matchMode: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO },
    { value: '', matchMode: FilterMatchMode.LESS_THAN_OR_EQUAL_TO }
  ]
});

2. 模板中绑定输入框 #

两个日期输入框分别绑定到数组内对应条件的 value 属性：

<!-- 如果是自定义过滤插槽的写法（推荐整合到列内） -->
<DataTable :value="yourData" :filters="filters" filterDisplay="row">
  <Column field="InputDate" header="日期">
    <template #filter="{ field }">
      <div class="flex gap-2">
        <InputText 
          class="filter-input" 
          type="date" 
          v-model="filters[field][0].value"
          placeholder="起始日期"
        />
        <InputText 
          class="filter-input" 
          type="date" 
          v-model="filters[field][1].value"
          placeholder="结束日期"
        />
      </div>
    </template>
  </Column>
</DataTable>

<!-- 或者单独的输入框写法 -->
<InputText class="filter-input" type="date" v-model="filters['InputDate'][0].value" />
<InputText class="filter-input" type="date" v-model="filters['InputDate'][1].value" />

3. 核心原理说明 #

PrimeVue DataTable 的过滤器规则中，单个字段支持数组形式的多条件配置，默认会用 AND 逻辑组合这些条件——即同时满足「大于等于起始日期」和「小于等于结束日期」，实现范围过滤效果。你之前的嵌套结构不符合框架的过滤器解析规则，因此无法生效。

内容的提问来源于stack exchange，提问作者Wormsonn