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

Posted 2023-02-16

【中文标题】如何使用自定义过滤器功能过滤 b 表行？

【英文标题】：How to filter b-table rows using a custom filter-function?

【发布时间】：2019-10-15 21:20:19

【问题描述】：

我正在尝试使用自定义过滤器函数过滤掉 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 岁的人，但它显示了所有记录。

【参考方案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>

【讨论】：

嘿，这对我也有帮助。我想知道我们如何使用选择字段动态编辑标准。假设我的表格显示了一些行，其中一列是部门。因此，如果我选择 HR 部门，则使用选择字段，那么我的表应该只显示其部门列为 HR 的行。你能帮帮我吗....

我想通了。但我仍然不知道一个 vue 表是否接受多个过滤器，即选择字段和搜索字段

也许这个问题对你有帮助：github.com/bootstrap-vue/bootstrap-vue/issues/1667