javascript - 对 vuejs 表中的特定列应用搜索过滤器

Question

这几天我会学习vuejs。我必须为特定列应用搜索过滤器。在 vuejs 文档中给出的网格组件示例中，它会搜索所有列。

教程链接 https://v2.vuejs.org/v2/examples/grid-component.html

gridData: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ]

我必须仅对 name 列应用搜索。有人可以帮我解决它吗？这是工作fiddle

Answer 1

只需以这种方式更改您的计算属性filteredData:

  computed: {
    filteredData: function () {
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var data = this.data
      // FILTER ONLY BY NAME
      if (filterKey) {
        data = data.filter( function (row) {
          return row.name.toLowerCase().includes(filterKey)
        })
      }
      // ==============
      if (sortKey) {
        data = data.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },

这是工作jsfiddle