Пользовательская фильтрация дат в 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
. Я в недоумении.