1

我的表中有日期列。它们以MMM YYYY（例如JAN 2020）格式呈现给用户。我希望用户能够根据这些月份和年份进行过滤 - 如果他们输入“Jan”，他们应该得到所有 1 月份的行，等等。多年来相同。

根据数据表的 Vuetify文档：

search您可以通过向 prop 提供函数来覆盖与 prop 一起使用的默认过滤custom-filter。如果您需要自定义特定列的过滤，您可以为filterheader items 上的属性提供一个函数。签名是(value: any, search: string | null, item: any) => boolean。即使search没有提供 prop，此函数也将始终运行。因此，您需要确保使用trueif 不应该应用过滤器的值提前退出。

我有几个标题，它们根据需要调用提供 filterDate 函数：

{
    text: "Contract Delivery",
    value: "contractDate",
    align: "center",
    sortable: true,
    filter: this.filterDate
},
{
    text: "Nominal Delivery",
    value: "targetDeliveryDate",
    align: "center",
    sortable: true,
    filter: this.filterDate
},

...以及函数本身：

const formatter = new Intl.DateTimeFormat("en-us", {
  year: "numeric",
  month: "short"
});

export default {
   // ... other stuff redacted
   methods: {
      filterDate(dateString, search) {
         // dateString is a string from the database, not a handy month and year

         if (dateString == null || search == null || search == "") return true;

         let month = "";
         let year = "";

         formatter
            .formatToParts(new Date(dateString)) // make it a date and get the bits
            .map(({ type, value }) => {
                switch (type) {
                   case "month":
                     this.month = value.ToLowerCase();
                     break;
                   case "year":
                     this.year = value;
                     break;
            });

          return month.indexOf(search.toLowerCase()) !== -1 || year.indexOf(search) !== -1
        });

      }    
   }
}

...但这显然行不通-即使我制作了整个formatDatejust ，我也无法使其工作return true。我不知所措。

4

0 回答 0