Question

我正在为这个项目使用vuejs，但这个问题不一定是连接的 - 但是如果有一个vue-way，我宁愿这样做。

我正在构建一个表，使用户能够使用每列过滤器（在本例中为简单input）。列是动态的，数据量也是动态的（数千行，但少于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)。如果我知道另外搜索标题，我可以重用第一个搜索查询的结果，大大减少了必须查看的数据量。

搜索查询存储在对象search中，过滤后的数据是计算属性，只要search发生更改，就会更新。它的工作方式是，如果我更改title的搜索查询，它将重新评估搜索查询甚至ID，尽管搜索查询没有改变。

这需要对每列过滤的数据进行某种缓存。并且只需要查询前面的列。

编辑：添加了过滤代码：

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
}

Answer 1

只是一个建议，但你是否尝试使用观察者来获得新的输入值。

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
  }
},
....

vuejs - 基于多个过滤器缓存表的搜索结果

1 个答案: