Пользовательская фильтрация дат в Vuetify

В моей таблице есть столбцы с датами. Они представлены пользователю вMMM YYYY (например JAN 2020) формат. Я хочу, чтобы пользователь мог фильтровать по этим месяцам и годам - ​​если они наберут "Янв", они должны получить все январские строки и т. Д. То же самое для многих лет.

Согласно документации Vuetify для таблиц данных:

Вы можете переопределить фильтрацию по умолчанию, используемую с search prop, предоставив функцию 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. Я в недоумении.

0 ответов

Другие вопросы по тегам