Vuetify Пользовательская колонка Фильтрация дат - PullRequest
Новая
       33

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

0 голосов
/ 16 января 2020

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

В соответствии с документацией Vuetify для таблиц данных:

Вы можете переопределить фильтрацию по умолчанию, используемую с search prop, предоставив функцию до custom-filter проп. Если вам нужно настроить фильтрацию указанного столбца c, вы можете предоставить функцию свойству filter для элементов заголовка . Подпись (value: any, search: string | null, item: any) => boolean. Эта функция всегда будет запускаться, даже если search prop не было предоставлено. Таким образом, вам нужно убедиться, что вы выходите рано со значением 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. Я в растерянности.

...