如何使用自定义过滤函数筛选bootstrap-vue的b-table行？函数未生效

嘿，我发现你的问题啦！你写的过滤逻辑本身没问题，但Bootstrap-Vue的b-table有个小规则你没注意到：只有当filter属性的值不是null/undefined这类假值的时候，才会触发自定义的filter-function。你现在设置了:filter=null，组件会直接跳过过滤流程，所以你的filterTable方法根本没被调用，控制台自然也没输出，所有行都原样显示了。

下面给你两种可行的解决办法：

方法一：给filter设置一个非空占位值 #

只需要把:filter=null改成一个非假值（比如空字符串''，或者任意非null的值），就能触发过滤函数了：

<template>
  <div>
    <!-- 用空字符串作为filter的占位值 -->
    <b-table striped hover :items="items" :filter="''" :filter-function="filterTable"></b-table>
  </div>
</template>

<script>
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) {
      console.log(row); // 现在控制台能正常输出了
      return row.age < 40; // 简化你的判断逻辑
    }
  }
}
</script>

方法二：用计算属性提前过滤数据 #

如果你的过滤条件是固定的，不需要根据用户输入动态变化，直接用computed属性处理数据源会更直观，也不用依赖b-table的过滤机制：

<template>
  <div>
    <b-table striped hover :items="filteredItems"></b-table>
  </div>
</template>

<script>
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' }
      ]
    }
  },
  computed: {
    filteredItems() {
      // 直接返回符合条件的行
      return this.items.filter(row => row.age < 40);
    }
  }
}
</script>

两种方法都能实现你要的“只显示40岁以下人员”的效果，选哪种看你的实际需求~

内容的提问来源于stack exchange，提问作者t_prz