如何使用自定义过滤器功能过滤 b 表行？

Question

我正在尝试使用自定义过滤器函数过滤掉 bootstrap-vue 表中的一些行。

我编写了一个函数，它接受两个参数 - 一个行对象和一个空过滤器参数，并返回真或假，如 documentation 中所示。

我尝试使用this 和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 属性需要 String、RegExp、Object 或 Array 类型的值。如果你给它分配一个数字，你会得到一个警告。您的过滤器函数的条件将作为第二个参数传递。

请看下面的例子：

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>