Я работаю над фильтрацией таблицы в vue js. Я сделал фильтрацию таблицы с именем и датой. Но теперь я не понимаю, как добавить еще один фильтр с ними.
Вот ссылка на codepen codepen
мое вычисленное свойство похоже на это ---
filterItem() {
let filterClient = this.selectedClient;
let startDate = this.localizeDate(this.startDate);
let endDate = this.localizeDate(this.endDate);
let filterBranch = this.selectedBranch;
const itemsByClient = filterClient
? this.salesReport.filter((item) => item.client_name === filterClient) && item.business_branch=== filterBranch)
: this.salesReport;
return itemsByClient.filter((item) => {
const itemDate = new Date(item.date);
if (startDate && endDate) {
return startDate <= itemDate && itemDate <= endDate;
}
if (startDate && !endDate) {
return startDate <= itemDate;
}
if (!startDate && endDate) {
return itemDate <= endDate;
}
return true;
});
},
Это работает, когда я даю имя и направление бизнеса, но я хочу фильтровать данные с именем или без него.
Например, если я выбираю клиента, в таблице отображается клиент. Теперь я хочу, когда я выбираю ветку (другие поля остаются пустыми), тогда в таблице отображаются строки, связанные с выбранной веткой
Просто настройте функции фильтра и свяжите их.
filterItem() {
let filterClient = this.selectedClient;
let startDate = this.localizeDate(this.startDate);
let endDate = this.localizeDate(this.endDate);
let filterBranch = this.selectedBranch;
const myClientFilterFunction = (item) => filterClient
? item.client_name === filterClient
: true;
const myBranchFilterFunction = (item) => filterBranch
? item.business_branch=== filterBranch
: true;
const myDateFilterFunction = (item) => {
const itemDate = new Date(item.date);
if (startDate && endDate) {
return startDate <= itemDate && itemDate <= endDate;
}
if (startDate && !endDate) {
return startDate <= itemDate;
}
if (!startDate && endDate) {
return itemDate <= endDate;
}
return true;
};
return this.salesReport
.filter(myClientFilterFunction)
.filter(myBranchFilterFunction)
.filter(myDateFilterFunction);
}
Для достижения более сложной логики, такой как фильтрация только для ветвей или для клиентов, просто программно добавьте функции фильтрации, например.
let report = this.salesReport;
if (this.selectedClient) {
report = report.filter(myClientFilterFunction);
}
if (this.selectedBranch) {
report = report.filter(myBranchFilterFunction);
}
report = report.filter(myDateFilterFunction);
return report;