如何在 Vue 3 和 PrimeVue 中使用两个输入框过滤数据？

2024-07-20 01:37:11

如何在 Vue 3 和 PrimeVue 中使用两个输入框过滤同一个字段的不同数据？

在使用 Vue 3 和 PrimeVue 组件库构建数据表格时，开发者常常需要实现更精细化的数据筛选功能。例如，我们希望根据日期范围筛选订单，或者根据价格区间筛选商品，这就需要使用两个输入框来过滤同一个字段的不同数据范围。本文将以 InputDate 字段为例，详细解析如何利用 PrimeVue 的强大功能，实现使用两个输入框分别输入起始日期和结束日期，从而精准筛选数据的目标。

深入问题

PrimeVue 提供了灵活的过滤机制，但默认情况下，一个字段只能绑定一个输入框进行过滤。为了实现更精细化的筛选，我们需要将一个字段与两个输入框关联，分别获取起始值和结束值，并在过滤逻辑中进行处理。这需要我们对 filters 对象的嵌套结构和 PrimeVue 组件提供的 v-model 指令、事件绑定机制有更深入的理解。

解决方案剖析

1. 构建嵌套的 `filters` 对象

首先，我们需要在 Vue 组件的 data 选项中定义一个嵌套的 filters 对象，用于存储所有字段的过滤条件。针对 InputDate 字段，我们在 filters 对象中创建一个名为 InputDate 的子对象，用于存储日期范围筛选的条件。

data() {
  return {
    filters: {
      InputDate: {
        from: { value: null, matchMode: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO },
        to: { value: null, matchMode: FilterMatchMode.LESS_THAN_OR_EQUAL_TO },
      },
      // 其他字段的过滤条件
    },
  };
},

InputDate 子对象包含两个属性：from 和 to，分别代表起始日期和结束日期。每个属性又包含 value 和 matchMode 两个子属性，value 用于存储具体的日期值，初始值为 null， matchMode 用于存储 PrimeVue 的匹配模式，我们将其设置为 FilterMatchMode.GREATER_THAN_OR_EQUAL_TO 和 FilterMatchMode.LESS_THAN_OR_EQUAL_TO ，分别表示大于等于和小于等于。

2. 使用 `v-model` 指令绑定输入框

接下来，我们需要在模板中使用两个 p-calendar 组件 (PrimeVue 的日历组件) 来获取用户的输入，并使用 v-model 指令将它们分别绑定到 filters['InputDate'].from.value 和 filters['InputDate'].to.value。

<div class="p-inputgroup">
  <p-calendar
    placeholder="起始日期"
    v-model="filters['InputDate'].from.value"
    dateFormat="yy-mm-dd"
  />
  <p-calendar
    placeholder="结束日期"
    v-model="filters['InputDate'].to.value"
    dateFormat="yy-mm-dd"
  />
</div>

这样，用户在日历组件中选择日期后，filters 对象中对应的值就会自动更新。

3. 在过滤函数中处理日期范围

最后，我们需要在过滤函数中编写逻辑，根据 filters 对象中存储的日期范围筛选数据。

const filteredData = computed(() => {
  return this.data.filter((item) => {
    // 其他字段的过滤逻辑...

    // 日期范围筛选
    if (this.filters.InputDate.from.value && this.filters.InputDate.to.value) {
      const fromDate = new Date(this.filters.InputDate.from.value);
      const toDate = new Date(this.filters.InputDate.to.value);
      const itemDate = new Date(item.InputDate);
      return itemDate >= fromDate && itemDate <= toDate;
    }

    // 如果没有设置日期范围，则默认返回所有数据
    return true;
  });
});

在过滤函数中，我们首先判断 filters.InputDate.from.value 和 filters.InputDate.to.value 是否都存在值。如果存在，则将字符串类型的日期值转换为 Date 对象，并比较 itemDate 是否在 fromDate 和 toDate 之间。如果 from 和 to 属性没有设置值，则默认返回所有数据，避免因为没有设置筛选条件而导致数据无法显示。

代码示例

<template>
  <div>
    <div class="p-inputgroup">
      <p-calendar
        placeholder="起始日期"
        v-model="filters['InputDate'].from.value"
        dateFormat="yy-mm-dd"
      />
      <p-calendar
        placeholder="结束日期"
        v-model="filters['InputDate'].to.value"
        dateFormat="yy-mm-dd"
      />
    </div>

    <p-datatable :value="filteredData">
      <p-column field="InputDate" header="日期"></p-column>
      </p-datatable>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { FilterMatchMode } from 'primevue/api';

export default {
  setup() {
    const data = ref([
      { InputDate: '2023-04-01' },
      { InputDate: '2023-04-05' },
      { InputDate: '2023-04-10' },
    ]);

    const filters = ref({
      InputDate: {
        from: { value: null, matchMode: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO },
        to: { value: null, matchMode: FilterMatchMode.LESS_THAN_OR_EQUAL_TO },
      },
    });

    const filteredData = computed(() => {
      return data.value.filter((item) => {
        // 日期范围筛选
        if (filters.value.InputDate.from.value && filters.value.InputDate.to.value) {
          const fromDate = new Date(filters.value.InputDate.from.value);
          const toDate = new Date(filters.value.InputDate.to.value);
          const itemDate = new Date(item.InputDate);
          return itemDate >= fromDate && itemDate <= toDate;
        }

        // 如果没有设置日期范围，则默认返回所有数据
        return true;
      });
    });

    return {
      data,
      filters,
      filteredData,
    };
  },
};
</script>

常见问题解答

如何实现其他类型的区间筛选？

可以参考日期范围筛选的思路，将 InputDate 替换成其他字段名，例如 price，并将 p-calendar 组件替换成 p-inputnumber 组件，用于输入价格区间。
如何处理用户输入的日期格式不正确的情况？

可以使用 p-calendar 组件的 dateFormat 属性指定日期格式，并使用 v-model 指令的修饰符 .lazy 来延迟更新数据，以便在用户输入完成后进行格式校验。
如何清空日期范围筛选条件？

可以将 filters.InputDate.from.value 和 filters.InputDate.to.value 的值设置为 null，或者使用 p-calendar 组件的 clearButton 属性显示清除按钮。
如何自定义匹配模式？

可以修改 filters.InputDate.from.matchMode 和 filters.InputDate.to.matchMode 的值，例如将其设置为 FilterMatchMode.EQUALS 表示精确匹配。
如何提高数据过滤的性能？

对于大规模数据的过滤，可以考虑使用 computed 属性缓存过滤结果，或者使用第三方库例如 lodash 提供的 debounce 函数来限制过滤函数的执行频率。