Question

我的表格中有日期列。它们以MMM YYYY（例如JAN 2020）格式显示给用户。我希望用户能够根据这些月份和年份进行过滤-如果他们输入“ Jan”，则应该获得所有一月份的行，依此类推。多年不变。

根据Vuetify documentation for Data Tables：

您可以通过为search道具提供功能来覆盖custom-filter道具所使用的默认过滤。 如果您需要自定义特定列的过滤条件，则可以向标头项目的filter属性提供功能。签名为(value: any, search: string | null, item: any) => boolean。即使未提供search道具，该功能也将始终运行。因此，如果不应该应用过滤器，则需要确保以true的值提前退出。

我有几个标题，可以根据需要调用来提供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
        });

      }    
   }
}

...但这显然不起作用-即使我只将整个formatDate仅return true也不能使它起作用。我很茫然。

Vuetify日期的自定义列过滤

0 个答案: