Question

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

教程链接https://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

Answer 2

对计算属性进行了一些更改，并使用了一个数组（如果您想在多列中应用搜索过滤器）。

P.S，您只需要替换过滤代码并创建一个数组“ searchableKeys”

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

这是有效的jsfiddle，其中使用“名称”和“数字”进行过滤

https://jsfiddle.net/s63nfx7r/1/

为表vuejs中的特定列应用搜索过滤器

2 个答案: