如何使用自定义过滤函数过滤 b-table 行？

Question

我正在尝试使用自定义过滤功能过滤掉 bootstrap-vue table 中的某些行。

我编写了一个带有两个参数的函数 - 一个行对象和一个空过滤器参数，以及 returns true 或 false，如 documentation.

我尝试使用 and this 答案中提供的代码，但它们也不起作用。

我也尝试过将 console.log(row, filter) 放入 filterTable 方法，但它没有向控制台写入任何内容。

<template>
  <div>
    <b-table 
      striped hover 
      :items="items" 
      :filter=null 
      :filter-function="filterTable"></b-table>
  </div>
</template>

export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    },

    methods: {
      filterTable(row) {
        if (row.age >= 40) {
          return false;
        } else {
          return true;
        }
      }
    }
}

本应显示小于40岁的人，却显示了所有记录。

Answer 1

您传递给过滤器函数的条件必须放在过滤器属性上才能反应。例如，您可以添加一个新的属性，例如criteria 到您的数据对象并将其分配给 :filter。 filter 属性需要字符串、正则表达式、对象或数组类型的值。如果你给它分配一个数字，你会得到一个警告。过滤函数的条件将作为第二个参数传递。

参见下面的示例：

new Vue({
  el: "#app",
  data() {
    return {
      criteria: "40",
      items: [{
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },

  methods: {
    filterTable(row, filter) {
      if (row.age >= filter) {
        return false;
      } else {
        return true;
      }
    }
  }
})

<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.21/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.21/dist/bootstrap-vue.js"></script>

<div id="app">
  <div>
    <b-table striped hover :items="items" :filter="criteria" :filter-function="filterTable">
    </b-table>
  </div>
</div>

如何使用自定义过滤函数过滤 b-table 行？

How to filter b-table rows using a custom filter-function?

vue.js

bootstrap-vue