我正在研究在 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;
});
},
當我同時提供名稱和業務分支但我想過濾有或沒有名稱的資料時，它會起作用。
例如，如果我選擇一個客戶端，那么表格會顯示該客戶端。現在我想要的是，當我選擇一個分支（其他欄位保持為空）時，表格會顯示與所選分支關聯的行
uj5u.com熱心網友回復：
只需設定您的過濾器功能并將它們鏈接起來。
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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537460.html