Javascript 为表vuejs中的特定列应用搜索筛选器

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

教程链接

---

我必须只对

name

列应用搜索。谁能帮我修一下吗。这是工作方法

只需通过以下方式更改计算属性

过滤器数据

：

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

---

以下是对计算属性进行了一些更改并使用了数组（如果要在多个列中应用搜索筛选器）的工作方法

另外，您只需要替换筛选代码，并生成一个数组“searchableKeys”

下面是正在工作的JSFIDLE，其中使用“name”和“number”进行过滤

---

我不明白你面临什么问题。小提琴起作用了fine@Isaac我想根据

名称

值进行筛选。这里可以看到，当我在搜索字段中给出

9000

时，它会过滤表格。谢谢。非常感谢。@Fabio。

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

  const searchableKeys = ['name','number']
  if (filterKey) {
    data = data.filter(row =>
      searchableKeys.some((key) => {
        const value = String(row[key])
        return value.toLowerCase().indexOf(filterKey) !== -1;
      }));
  }