vuejs - 基於多個過濾器緩存表的搜索結果

我對這個項目使用vuejs，但這個問題不一定是連接的 - 但如果有vue-way，我更喜歡這樣。vuejs - 基於多個過濾器緩存表的搜索結果

我正在建立一個表格，使用戶可以擁有每列過濾器（在這種情況下，簡單的input s）。這些列是動態的，數據量也是如此（數千行，但少於100.000個條目）。

// example data 
var columns = ['id', 'title', 'date', 'colour'] 
var data = [{ id: 1, title: 'Testentry 1', date: '2017-02-21T07:10:55.124Z', colour: 'green'}]

這裏的問題是：我遍歷列，如果搜索輸入存在檢查，如果是這樣，我試圖篩選基礎上，SEARCHQUERY數據。在ID的情況下，時間複雜度爲O(n)。如果我還需要額外搜索標題，則可以重新使用第一個搜索查詢的結果，從而大大減少必須查看的數據量。

的searchqueries被存儲在對象search，將過濾數據是計算屬性，即得到每當search變化更新。儘管如此，但如果我更改title的searchquery，它將重新評估searchquery，即使對於ID，儘管searchquery沒有改變。

這需要對每列的數據進行某種緩存。只有前面的欄需要被查詢。

編輯：用於過濾添加的代碼：

filteredRows() { 
    var rows = this.data 
    for (var i = 0; i < this.columns.length; i++) { 
    var column = this.columns[i].name 
    var search = this.tSearch[column] 

    if (!search && search.length === 0) continue 

    console.log(column + ': ' + ' (' + search + ') -> ' + rows.length) 
    rows = _.filter(rows, (row) => { 
     var value = '' + row[column] 
     value.search(search) > -1 
    }) 
    } 

    return rows 
}

來源

2017-02-21 Johannes

我們可以看到您的計算屬性的代碼？ – Justin

@Justin：當然，我只是加了它。 – Johannes

只是一個建議，但你嘗試使用一個觀察者以獲取輸入的新舊價值。

data: function() { 
    return { 
    propertyToWatch: 'something' 
    } 
}, 
computed: { 
    ... 
}, 
watch: { 
    'propertyToWatch': function (val, oldVal) { 
    console.log(oldVal); // logs old value 
    console.log(val); // logs current value 
    // here you can call a function and send both of these args and detect diff 
    } 
}, 
....

來源

2017-02-23 00:34:52 peaceman

手錶在深層物業上看起來並不像那樣。新值對於新值始終是相同的，只是觀察對象而不是對象上的屬性並不能幫助我。 – Johannes

這是一個想法，對不起，我忍不住。如果我想到其他東西，我會編輯。 – peaceman

vuejs - 基於多個過濾器緩存表的搜索結果

回答

相關問題